在HTML5画布中制作简单绘画

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

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

如您所见，只有当鼠标位于画布元素上时，该函数才起作用。现在我想让它“画”时，点击鼠标（就像在油漆）。谁能告诉我怎么做（用代码）？

---

Thx要获得帮助

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

您可以通过将事件处理程序附加到“mousedown”和“mouseup”事件来实现这一点，类似于附加到“mousemove”事件的方式

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

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

---

您可以在这里看到一个工作示例：

我在想jQuery mousedown（），但我不知道如何正确使用它