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

Question

我想使用鼠标事件在画布上绘制一个简单的圆圈，但是我得到的是部分圆圈，半个圆圈，有时是一个完整的圆圈。 矩形工作正常，并附带了生成的局部圆的图片。 在此处输入图片描述，代码为

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

Answer 1

arc（）中的第四个参数是起始ANGLE。 因此，您希望0到Math.PI * 2为一个完整的圆。

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

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