Javascript绘画画布

Question

我的代码有问题。 它是一个简单的画布元素绘制圆圈。 我无法弄清两件事。 第一个是如何在按住鼠标左键的同时连续绘制圆（一次不绘制圆）。 “ Onmousehold”似乎在这里不起作用。 其次，是否有可能摆脱控制台中的第一个参考错误？ 当尚未指定点击坐标时，它仅显示一次。 我的代码在这里：

 var outer = document.getElementById("outer"); var ctx = outer.getContext("2d"); function getMousePos(e) { var cursorX = e.clientX; var cursorY = e.clientY; x = cursorX; y = cursorY; } function showBox() { ctx.beginPath(); ctx.arc(x,y,20,0,2*Math.PI); ctx.stroke(); console.log(x,y); } outer.addEventListener("click",getMousePos); outer.addEventListener("click",showBox); outer.addEventListener("mousedown",showBox); 

 #outer { position:relative; overflow: hidden; border: 1px solid green; } .popup { width: 50px; height: 50px; border-radius: 25px; background-color: blue; position: absolute; } 

  <canvas id="outer" width="600" height="600"> </canvas> 

和jsfiddle jsfiddle

Answer 1

看到这个： http : //jsfiddle.net/4ovgzk07/2/

var outer = document.getElementById("outer");
var ctx = outer.getContext("2d");
function getMousePos(e) {
    var cursorX = e.clientX; 
    var cursorY = e.clientY; 
    x = cursorX;
    y = cursorY;
}
function showBox() {
ctx.beginPath();
ctx.arc(x,y,20,0,2*Math.PI);
ctx.stroke();
console.log(x,y);
    outer.addEventListener("mousemove",getMousePos);
outer.addEventListener("mousemove",showBox)
    outer.addEventListener("mouseup",removelisteners);

}
function removelisteners() {

    outer.removeEventListener("mousemove",getMousePos);
outer.removeEventListener("mousemove",showBox)


}
outer.addEventListener("mousedown",getMousePos);
outer.addEventListener("mousedown",showBox);

;

您需要在发生mousedown时为mousemove附加事件，类似地，在mouseup上删除这些events