Question

我的代码有问题。它是一个绘制圆圈的简单画布元素。有两件事我无法弄清楚。第一个是如何在按住鼠标左键的同时连续绘制圆圈（不是一次一个）。＆＃34; Onmousehold＆＃34;似乎没有在这里工作。其次是可以从控制台摆脱第一个引用错误？只有在未指定点击坐标时才会出现一次。我的代码在这里：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

并且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);

;

您需要在发生mousemove时附加mousedown的事件，同样删除events上的mouseup

Javascript画布

1 个答案: