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

Question

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

＆＃13;

＆＃13;

        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);
        }

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

context.arc（rect.startX，rect.startY，rect.w，0，Math.PI * 2，false）;

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