我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。
教程介绍、教程目录等能在README里查阅。
传送门：/827652549/CanvasStudy
介绍
前面我们已经介绍了画板上矩形框的画法，现在我们来介绍圆的画法。
在之前的教程中，我们说过除了绘制线段之外，可以通过重新实线drawRubberbandShape()函数来支持其他图形的绘制。这节课便是对上节课的补充和说明。
传递给drawRubberbandShape()方法的loc对象包含鼠标当前的X，Y坐标。鼠标按下事件发生的地点记录在名为mousedown的变量之中，它和loc对象一样，也包含一对X，Y坐标。
通过这两组坐标，算出二者的连线长度，将此值作为半径画圆即可。（这种方法是从圆心拉向周围的以半径为基准的画法，以直径为基准的画法请参考矩形选区的画法，这里不再过多示范）
我们重写这个函数，实线圆形的绘制。
function updateRubberbandCircle(loc) {rubberbandRect.width = Math.abs(loc.x - mousedown.x);rubberbandRect.height = Math.abs(loc.y - mousedown.y);var angle, radius;if (mousedown.y === loc.y) {radius = Math.abs(loc.x - mousedown.x);console.log(radius);} else {//反正切函数console.log(rubberbandRect.height + '+' + rubberbandRect.width);radius = Math.sqrt(Math.pow(rubberbandRect.height, 2) + Math.pow(rubberbandRect.width, 2));}context.beginPath();context.arc(mousedown.x, mousedown.y, radius, 0, Math.PI * 2, false);context.stroke();if (rectangle) {context.fillStyle=strokeStyleSelect.value;context.fill();}}
代码完成之后，因为复用的画线段版本的代码，所以还需要进行少许其他代码的修改，最终效果如下。
在线演示 详细代码
这样，我们就可以通过修改颜色和实心选项，随心所欲地画圆了。
现在我们里Canvas画板又进了一步。
