Html5 canvas 需要在画布上绘制箭头和圆圈，而不清除整个画布

我正在尝试在画布上绘制箭头和圆圈，目前在mousemove和MouseMown上清除了整个画布，或者每当调用draw函数时，我都无法绘制多个箭头和圆圈。还有其他方法来完成这项任务吗

heres a fiddle: http://jsfiddle.net/V7MRL/

---

在每个画布的顶部堆叠两个画布，并在顶部的画布上绘制临时箭头/圆圈，然后在下面的画布上进行最终绘制。
通过这种方式，您可以清除顶部画布而不产生任何问题，并且您的绘图将在下部画布中“累积”

（更新）

我改变了你的抽签功能，所以它需要一个“最终”标志来表明抽签是否是最终的。 对于最终绘制，使用下部画布；对于临时绘制，清除上部画布，然后使用

function draw(final) {
    var ctx = final ? context : tempContext ;
    if (final == false)   ctx.clearRect(0, 0, canvas.width, canvas.height);

编辑：对于提到的@markE问题，我刚刚处理了mouseout事件以取消正在进行的抽签：

function mouseOut(eve) {
   if ( mouseIsDown ) {
      mouseIsDown = 0;
      cancelTempDraw();
   }
 }

与：

function cancelTempDraw() {
    tempContext.clearRect(0, 0, canvas.width, canvas.height);
 }

Rq：您的撤消逻辑到目前为止不起作用。我对它做了一些修改，以便在draw中，如果绘制是最终的，我会在绘制最新图形之前保存最终画布，以便快速进行一步撤消。我刚刚创建了第三个临时画布，您可以从中复制

Rq还指出，不能为每个笔划存储一个画布，否则内存将很快爆炸。如果要完全撤消，请将图形及其坐标存储在数组中。。。或者现在只允许一步撤消

---

我更新了JSFIDLE链接。

我认为您的思路是正确的。一个小故障：将鼠标拖动到画布外时，绘图“boogers”（fix==preventDefault+stopPropagation）。我唯一感到不安的是，您的tempCanvas永远位于结果画布的顶部，因此所有事件都必须通过tempCanvas路由。现在这不是问题，但这些绘图应用程序通常会演变为包含拖动，tempCanvas会截获用于主画布的事件，因此在这一点上会造成阻碍。不管怎样……回答得很好！：）Thx，是的，我们会看看O.P.对这项提议的反应。关于事件重定向，对于相同大小/缩放/。。。画布它不会改变很多东西，因为不管怎样，我们只处理相同的（x，y）坐标，不管画布是什么。在其他情况下，我希望js有WPF的可能性，在WPF中，您只需编写ishitestvisible=false……谢谢！这就是我所需要的，你救了我的命，但我也想知道@markE指出的问题