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

Question

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

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

Answer 1

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

http://jsfiddle.net/V7MRL/5/（已更新）

我改变了你的绘画功能，所以它需要一个'最终'标志，表明平局是最终的。 对于最终绘制，使用下部画布，对于临时绘制，上部画布被清除然后使用。

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

with：

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

Rq表示你的撤销逻辑目前无效。我改变了一点，以便在绘制时，如果绘制是最终的，我在绘制最新图形之前保存最终画布以快速进行一步撤消。我刚创建了第三个临时画布，你可以从中复制。

Rq还表示你不能为每个笔划存储一个画布，否则内存很快就会爆炸。如果您想要完全撤消，请将数字+坐标存储在数组中......或者现在只允许一步撤消。

我更新了jsfiddle链接。