使用路径来描述HTML5画布中的弧线

使用路径来描述HTML5画布中的弧线
本文主要介绍了使用HTML5画布进行路径描述的方法。本文演示了如何在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史提夫富尔顿杰夫富尔顿原方法的描述是完全错误的。正确的北极()总结了曲线的北极。

tag:描述路径弧线电脑软件

相关内容