html5制作圆弧 1.2 绘制圆弧 - HTML5 Canvas 实战

使用HTML5画布时，有时候需要绘制完美的圆弧。如果你对绘制彩虹、笑脸、图表等感兴趣，本节将是你努力的起点。

图1-3 绘制圆弧

绘制步骤

按照以下步骤绘制一条圆弧：

1. 定义2D画布并设置圆弧样式：

window.onload = function(){

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.lineWidth = 15;

context.strokeStyle = "black"; //弧线颜色

2. 绘制圆弧：

context.arc(canvas.width / 2, canvas.height / 2 + 40, 80, 1.1 * Math.PI, 1.9 * Math.PI, false);

context.stroke();

};

3. 在HTML文档的body部分嵌入canvas标签：

工作原理

我们可以使用arc()方法来创建圆弧，圆弧被定义为假想的圆周上任意两点之间的部分。请看下图：

图1-4 arc()方法绘制原理

假想的圆由圆心和半径来定义。圆弧由起始角度、结束角度、是否逆时针方向来定义：

context.arc(centerX,centerY, radius, startingAngle, endingAngle,counterclockwise);

注意，角度从圆右侧的0π开始，并按顺时针方向经过3π/2, π, π/2，再回到0π。本节，我们以1.1π为起始角度、1.9π为结束角度，也就是说，起始角度在圆周左侧中心线略微向上一点，而结束角度在圆周右侧中心线略微向上一点。

了解更多

起始角度和结束角度没必要非得在0π 到 2π之间。事实上，起始角度和结束角度可以是任意实数，因为在圆周上旋转时，角度可以相互重叠。

例如，比方说我们定义3π为起始角度，就相当于圆周上完整的一圈(2π)再加另外半圈(1π)。换句话说，3π就等价于1π。再举一个例子，-3π也等价于1π，因为角度沿圆周逆时针旋转1.5圈，将结束于1π。

创建圆弧的另一个方法是arcTo()方法，该方法定义的圆弧由上下文点、一个控制点、一个起始点和半径来确定：

context.arcTo(controlPointX1, controlPointY1, endingPointX, endingPointY, radius);

与arc()方法不同，arc()方法根据圆心来定位圆弧，而arcTo()方法根据上下文点定位圆弧，跟lineTo()方法相似。在创建路径或图形的圆角时，arcTo()是最常用的方法。

相关参考

第2章 绘制圆

第5章 动画机械齿轮

第5章 动画时钟