Question

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

我已将图片设为背景。使用clearRect动画的描边矩形用于从背景图像中选择一个方形。在mousedown上，画布被变换和缩放，选定的图像正方形被绘制到画布上。

选择正方形后，我想停止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);

一旦调用了另一个，就停止一个Function / EventListener

3 个答案: