您现在的位置是：网站首页> 编程资料编程资料

使用HTML5 Canvas API绘制弧线的教程通过HTML5 Canvas API绘制弧线和圆形的教程HTML5 Canvas中使用用路径描画圆弧html5的画布canvas——画出弧线、旋转的图形实例代码+效果图

2021-08-31 1155人已围观

简介 这篇文章主要介绍了使用HTML5 Canvas API绘制弧线的教程,其中重点讲解了JavaScript使用arcTo()方法根据切点绘制圆弧的方法,需要的朋友可以参考下

运行结果：

之所以要绘制一个空白的矩形填满画布，是因为我们之前说过，canvas是透明的，如果不设置背景色，那么它就会被我设置的纹理所覆盖，想要使其拥有背景色（白色），只有绘制矩形覆盖canvas这一个方法。

怎么样，是不是非常的酷？

使用arc()绘制圆弧
arc()的使用方法如下：

前面三个参数，分别是圆心坐标与圆半径。startAngle、endAngle使用的是弧度值，不是角度值。弧度的规定是绝对的，如下图。

anticlockwise表示绘制的方法，是顺时针还是逆时针绘制。它传入布尔值，true表示逆时针绘制，false表示顺时针绘制，缺省值为false。

弧度的规定是绝对的，什么意思呢？就是指你要绘制什么样的圆弧，弧度直接按上面的那个标准填就行了。

比如你绘制 0.5pi ~ 1pi 的圆弧，如果顺时针画，就只是左下角那1/4个圆弧；如果逆时针画，就是与之互补的右上角的3/4圆弧。此处自己尝试，不再举例。

使用切点绘制圆弧

arcTo()介绍:
arcTo()方法接收5个参数，分别是两个切点的坐标和圆弧半径。这个方法是依据切线画弧线，即由两个切线确定一条弧线。
具体如下。

这个函数以给定的半径绘制一条弧线，圆弧的起点与当前路径的位置到(x1, y1)点的直线相切，圆弧的终点与(x1, y1)点到(x2, y2)的直线相切。因此其通常配合moveTo()或lineTo()使用。其能力是可以被更为简单的arc()替代的，其复杂就复杂在绘制方法上使用了切点。

使用切点绘制弧线:
下面的案例我把切线也绘制出来了，看的更清楚一些。