无法使用鼠标事件在 JavaScript 中的画布上绘制一个完整的圆圈答案

【问题标题】：Not able to draw a full circle on canvas in JavaScript using mouse events无法使用鼠标事件在 JavaScript 中的画布上绘制一个完整的圆圈
【发布时间】：2018-04-12 02:15:37
【问题描述】：

我想使用鼠标事件在画布上绘制一个简单的圆，但我得到的是部分圆、半圆，有时是完整的。矩形工作正常。附上生成的部分圆的图片。enter image description here 代码是

        function draw() {
                     if (circ == 1)
            {
                context.beginPath();
                context.arc(rect.startX, rect.startY, rect.w, rect.h, Math.PI * 2, false);
                context.stroke();
            }

        }

        function mouseDownrect(e) {
            rect.startX = (e.layerX - this.offsetLeft);
            rect.startY = e.layerY - this.offsetTop;
            drag = true;

        }

        function mouseUprect() {

            draw();
            rect.w = 0;
            rect.h = 0;
            drag = false;
        }

        function mouseMoverect(e) {

            if (drag == true) {
                rect.w = (e.layerX - this.offsetLeft) - rect.startX;
                rect.h = (e.layerY - this.offsetTop) - rect.startY;
            }

        }
        function rectangle() {
            color = 'black';
            rectan = 1;
            circ = 0;
            pen = 0;
            canvas.addEventListener('mousedown', mouseDownrect, false);
            canvas.addEventListener('mouseup', mouseUprect, false);
            canvas.addEventListener('mousemove', mouseMoverect, false);

        }
        function Circle()
        {
            color = 'black';
            circ = 1;
            rectan = 0;
            pen = 0;
            canvas.addEventListener('mousedown', mouseDownrect, false);
            canvas.addEventListener('mouseup', mouseUprect, false);
            canvas.addEventListener('mousemove', mouseMoverect, false);
        }

【问题讨论】：

您应该查看arc() 的参考资料，第四个参数是角度而不是高度

标签： javascript html canvas drawing

【解决方案1】：

arc() 中的第四个参数是起始角度。所以你想要 0 到 Math.PI * 2 一个完整的圆圈。

context.arc(rect.startX, rect.startY, rect.w, 0, Math.PI * 2, false);

另外，第三个参数是 RADIUS，我不知道你想要什么。

【讨论】：