Javascript 油漆 canvas

Question

我的代码有问题。它是一个简单的 canvas 元素绘制圆圈。有两件事我无法弄清楚。第一个是如何在按住鼠标左键的同时连续绘制圆圈（不是一次一个）。 "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

Javascript 油漆 canvas

Javascript paint canvas

html

javascript

canvas