2.2 绘制圆形

虽然HTML5的画布API未提供直接绘制圆形的方法，但我们一定可以通过绘制一个完全闭合的圆弧来创建这样一个方法。

绘制步骤

按照以下步骤，在画布的中央绘制一个圆：

1. 定义2D画布上下文：

window.onload  = function(){
  var canvas  = document.getElementById("myCanvas");
  var context  = canvas.getContext("2d");

2. 使用arc()方法创建一个圆，通过fillStyle属性设置填充颜色，并使用fill()方法填充图形。

  context.arc(canvas.width / 2, canvas.height / 2, 70, 0, 2 * Math.PI, false);
  context.fillStyle = "#8ED6FF"; 
  context.fill();
  context.lineWidth   =  5;
  context.strokeStyle = "black"; 
  context.stroke();
};

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

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

在第1章曾经介绍过，我们可以使用arc()方法创建一个圆弧，该方法绘制由起始角度和结束角度定义的圆的一部分。然而，如果我们定义的起始角度和结束角度之间的差值为360°(2π)，我们将绘制出一个完整的圆。

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

相关参考

• 使用循环创建图案：绘制齿轮
• 第4章 把圆变为椭圆
• 第5章 摆钟
• 第5章 模拟粒子物理学
• 第5章 动画时钟
• 第6章 检测区域事件
• 第7章 创建饼图