调用另一个函数/事件侦听器时停止

Question

我正在尝试使用 html5 画布编写绘图应用程序。

我已将图像设置为背景。使用 clearRect 动画的描边矩形用于从背景图像中选择一个正方形。在鼠标按下时，画布被转换和缩放，并且选定的图像正方形被绘制到画布上。

一旦选择了一个正方形，我想停止 clearRect 函数，以便我可以启动绘图函数。不幸的是，尽管查看了历史帖子，但我无法保留缩放后的图像，并且由于选择功能仍处于活动状态，它立即被清除。

这是我的 javascript 代码：

function doFirst(){
var x = document.getElementById('canvas')
canvas=x.getContext('2d');
canvas.strokeStyle = "red";
canvas.fillStyle="black";
canvas.font = "bold 36px Arial";
}

function select(e){
xPos=Math.floor(e.clientX/100)*100;
yPos=Math.floor(e.clientY/100)*100;
canvas.clearRect(0,0,500,800);
canvas.strokeRect(xPos+1,yPos+1,99,99);
}

function zoom(e) {
var xPos=e.clientX;
var yPos=e.clientY;
canvas.scale(5,5);
canvas.translate(-Math.floor(xPos/100)*100,-Math.floor(yPos/100)*100);
canvas.strokeStyle="transparent";
var pic= new Image();
pic.src = "tut.jpg";
pic.addEventListener ("load",function(){canvas.drawImage(pic,0,0)},false);
}

window.addEventListener ("load", doFirst, false);
window.addEventListener ("mousemove", select, false);
window.addEventListener ("mousedown", zoom, false);

非常感谢，

尼克

Answer 1

这个？

window.removeEventListener ("mousemove", select, false);

Answer 2

不太符合您的意思，但是当鼠标移动时，mousemove 侦听器每秒会触发多次？

Answer 3

试试这个：

document.addEventListener("load", function(e){e.stopPropagation();doFirst}, true);
document.addEventListener("mousemove", function(e){e.stopPropagation();select}, true);
document.addEventListener("mousedown", function(e){e.stopPropagation();zoom}, true);