【绘制】HTML5 Canvas绘画画板，实现鼠标画圆，控制器选择空心圆、实心圆（图文、示例）

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/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画板又进了一步。