Question

我在canvas元素中有“绘制”的简单代码：

function doFirst(){
var x = document.getElementById('canvas');
canvas = x.getContext('2d');
window.addEventListener("mousemove", rys, false);
}

function rys(e){

var xPos = e.clientX;
var yPos = e.clientY;

canvas.fillStyle="#000";
canvas.beginPath();
canvas.arc(xPos-7,yPos-7,10,0,Math.PI*2,true);
canvas.closePath();
canvas.fill();

}
window.addEventListener("load", doFirst, false);

如您所见，该功能仅在鼠标位于canvas元素上时才起作用。现在我想在点击鼠标时“画画”（就像在画中一样）。有人能告诉我怎么做（带代码）吗？请求帮助

Answer 1

您需要独立于鼠标移动跟踪当前鼠标按钮状态（按下或未按下）。

您可以通过将事件处理程序附加到“mousedown”和“mouseup”事件来完成此操作，类似于您附加到“mousemove”事件的方式。

在这些事件处理程序中，您可以通过更新指示当前是否按下按钮的全局变量来跟踪第一个鼠标按钮的当前状态。然后，在“mousemove”处理程序中，您可以检查此全局变量并确定是否在移动鼠标时进行绘制。

使用“mouseup”和“mousedown”事件时，您可能希望仅在按下第一个鼠标按钮时限制处理。您可以通过检查事件属性“按钮”是否为0来执行此操作。请注意，您还可以检查其他按钮并跟踪它们。

你可以在这里看到一个有效的例子：http://jsfiddle.net/mQtKz/

在html 5画布中制作简单的画

1 个答案: