無法使用鼠標事件在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，我不知道您想要什么。