使用路径来描述HTML5画布中的弧线
这篇文章是由史提夫富尔顿杰夫富尔顿HTML5画布,2章,先进的路径方法,Arcs翻译;
在画布上画弧线;它可以是整个圆圈,也可以是圆周的一部分。
复制代码代码如下所示:
Context.arc()
context.arc(x,y,半径,startangle,EndAngle,逆时针)
在上述方法的描述,x和y定义圆圈的中心和半径定义的circle.startangle EndAngle半径和极坐标表示。逆时针(布尔值)定义圆弧方向。
例如,如果我们想用一个半径为20的点(100, 100)画一个圆,我们可以使用下面的代码:
复制代码代码如下所示:
context.arc(100, 100, 20,(数学。π/ 180)* 0(数学。π/ 180)* 360,假);
执行的效果是:
值得注意的是,在上面的代码中,我们需要通过乘(数学,pi,180)将初始角度(0)和结束角(360)转换为极极半径,当起始角度为0,结束角为360时,得到一个整圆。
除了整个圆,我们还可以描述弧。下面的代码描绘了1个 4个圆:
复制代码代码如下所示:
context.arc(100, 100, 20,(数学。π/ 180)* 0(数学。π/ 180)* 90,假);
如果我们想描述其他3 / 4圈以上的弧,我们可以设置逆时针为真:
复制代码代码如下所示:
context.arc(100, 100, 20,(数学。π/ 180)* 0(数学。π/ 180)* 90,真的);
注1:在画布坐标系中,Y轴的方向是向下的。
注2:电弧可以利用context.arcto描述()方法,在HTML5 canvas史提夫富尔顿杰夫富尔顿原方法的描述是完全错误的。正确的北极()总结了曲线的北极。