html5 Canvas绘图教程(5)—canvas里画曲线之arc要领
发布时间：2020-09-21 06:35:10 所属栏目：编程 来源：网络整理
导读：anvas里画曲线的难点之一，就在于他连曲线的函数就有4个！别离是arc,arcTo,quadraticCurveTo,bezierCurveTo.我从最简朴的arc要领讲起吧,感乐趣的伴侣可以相识下
|
在canvas画线条这篇文章中，我讲了画直线的要领，按理这篇画曲线的文章早该发了，但因为canvas画曲线较量非凡，我还没摸透，以是要一步步实行。 canvas里画曲线的难点之一，就在于他连曲线的函数就有4个！别离是arc,arcTo,quadraticCurveTo,bezierCurveTo.我从最简朴的arc要领讲起吧。 arc的浸染是画一个正规的圆弧，可所以一个完备的圆，也可所以一个圆的某一段弧线。 arc的语法如下： 复制代码 代码如下: 他的参数我表明一下，即 arc(圆心x,圆心y,半径,开始的角度,竣事的角度,是否逆时针) 假如我们用arc画一个完备的圆，该怎么搞？各人留意到参数中有个开始角度与竣事角度，假如我们开始角度是0，竣事角度是360，不就是个正圆了？ 正解！但要留意的是，这里的角度是用“弧度”来暗示的（Flash也是云云），一个完备的圆即360度，就是2PI弧度。 以是我们这么写： 复制代码 代码如下: 和lineTo一样,arc也是画的路径，以是我们要在他后头挪用添补或描边的要领才气显出图形(图中回收了赤色的strokeStyle与半透明赤色的fillStyle)。 此刻我们来画一个1/4圆,角度嘛，就是90度。前面说了，360度角即2PI弧度，那么一度角就是2PI/360=PI/180弧度，那么90度就是2PI/360*90=PI/2弧度(其他的角度请自行计较)。 复制代码 代码如下: 由图我们可以确定arc的0度就是数学上常用的0度，可是角度默认是顺时针张开的，与数学模子相反（跟坐标有关，由于canvas坐标也与数学坐标相反）。 不外前面不是有个参数是确定是否逆时针吗？我们把他设为true怎样？ 复制代码 代码如下: 你会看到，角度酿成了逆时针睁开，导致弧线酿成了360-90=270度。 可是！各人要留意一点，就是出发点与终点的计较方法，始终是以0度为出发点，并顺时针延长的，不存在顺反的说法。顺反时针只是弧线的绘制偏向。 这样不只仅可以防备顺来逆去的轻易夹杂，并且更利便计较。 不外，机动的行使逆时针，偶然辰很有效。 上面的例子，我们的出发点角度都是0，此刻我们试试其他的出发点角度吧，好比90度。 复制代码 代码如下: 假如我们出发点是90度而终点也是90度，那功效就是什么都不得画，以是我把终点角度改成了180度，最后获得下图的图形。 题目：假如我们从非0度出发点来画一个完备的圆，行不可？虽然也可以，只要你把弧线的终点配置为360度+出发点角度，如： 复制代码 代码如下: 不外这种做法纯属没事谋事，正凡人是不会用的。 总结：Canvas的arc要领是画正圆弧线的步伐，也只能画正弧线，没法画其他稀疏的弧线,好比S形——固然我最喜好S形了。 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读