3.canvas：圆弧的绘制

canvas：圆弧的绘制

canvas提供两个API用于绘制圆弧：arc()和arcTo()

方法	描述
arc(double x, double y, double radius, double startAngle, double endAngle, boolean counter-clockwise)	创建一条以(x,y) 为圆心，以radius为半径，以startAngle为起始角，endAngle为终止角的圆弧路径。 角的弧度，不是角度，最后一个参数是可选的，默认为false，代表顺时针画弧。 如果在调用这个方法时，当前路径中有子路径存在，那么浏览器会将子路径终点和所画 圆弧的起点用直线相连
arcTo(double x1, double y1, double x2, double y2, double radius)	参考(x1, y1)(x2, y2)两个点，创建一天以radius为半径的圆弧路径，改圆弧 与当前点到（x1,y1)点的连线相切，同时也与(x1,y1)到(x2,y2)的连续相切。 如果在调用这个方法时，当前路径中有子路径存在，那么浏览器会将子路径终点和所画 圆弧的起点用直线相连
quadraticCurveTo(double cpx, double cpy, double x, double y)	创建一条表示二次方贝贝塞尔曲线的路径。该方法需要传入两个点，第一个点是曲线控 制点，第二个是锚点。
bezierCurveTo(double cpx, double cpy, double cp2x, double cp2y , double x, double y)	创建一条代表三次方贝赛尔曲线的路径。你需要像该方法传入三个点的坐标，前两点 是该曲线的控制点，最后一个点是锚点。

arcTo实例代码如下：

var context = document.getElementById(‘canvas’).getContext(‘2d’);
function roundedRect(cornerX, cornerY, width, height, cornerRadius){
if(width > 0)
context.moveTo(cornerX + cornerRadius, cornerY);
else
context.moveTo(cornerX - cornerRadius, cornerY);
context.arcTo(cornerX + width, cornerY, cornerX + width, cornerY
+ height, cornerRadius);
context.arcTo(cornerX + width, cornerY + height,
cornerX, cornerY + height, cornerRadius);
context.arcTo(cornerX, cornerY + height, cornerX, cornerY,
cornerRadius);
if(width > 0){
context.arcTo(cornerX, cornerY,
cornerX + cornerRadius, cornerY, cornerRadius);
}
else{
context.arcTo(cornerX, cornerY, cornerX - cornerRadius,
cornerY, cornerRadius);
}
}
function drawRoundedRect(strokeStyle, fillStyle, cornerX, cornerY,
width, height, cornerRadius){
context.beginPath();
roundedRect(cornerX, cornerY, width, height, cornerRadius);
context.strokeStyle = strokeStyle;
context.fillStyle = fillStyle;
context.lineWidth = 5;
context.stroke();
context.fill();
}
drawRoundedRect(‘white’, ‘yellow’, 50, 40, 100, 100, 10);
drawRoundedRect(‘white’, ‘green’, 275, 40, -100, 100, 20);
drawRoundedRect(‘white’, ‘goldenrod’, 300, 140, 100, -100, 30);
drawRoundedRect(‘white’, ‘blue’, 525, 140, -100, -100, 40);