HTML5 Canvas-在Canvas上绘制，保存上下文并稍后还原

Question

需求：

现在：在画布上绘制，然后单击保存（存储画布状态/离线绘制-但不作为图像）。
以后：打开画布并显示以前保存的图形，然后继续进行绘制。

对于绘制，我们通常使用如下代码：

canvas = document.getElementById('can');
ctx = canvas.getContext("2d");
...
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
....

为了以后恢复Canvas状态-导出到Image没有帮助。
我想将“画布”还原到其原始状态，以便以后继续编辑图形。

我猜想，Canvas上下文必须离线导出和存储-如何？

Answer 1

最好的选择是使用一个代理，它既可以存储绘制命令，也可以执行绘制。
由于浏览器对Proxy的支持非常糟糕（截至目前仅支持FF），因此您必须使用nosuchmethod或通过Context2D构建新的全新WatchedContext类来自行构建Proxy。
对于这个简短的演示，我采用了最后一个解决方案（WatchedContext类）：

function WatchedContext(hostedCtx) {
  this.commands= [];
  Context2dPrototype = CanvasRenderingContext2D.prototype;
  for (var p in Context2dPrototype ) {
    this[p] = function(methodName) {
        return function() {
            this.commands.push(methodName, arguments);
            return Context2dPrototype[methodName].apply(hostedCtx, arguments);
        }      
    }(p);
  }  
  this.replay=function() {
    for (var i=0; i<this.commands.length; i+=2) {
      var com = this.commands[i];
      var args = this.commands[i+1];
      Context2dPrototype[com].apply(hostedCtx, args);
    }
  }
}

显然，您可能需要其他方法（开始/停止记录，清除等）

只是一个小的使用示例：

var cv = document.getElementById('cv');
var ctx=cv.getContext('2d');
var watchedContext=new WatchedContext(ctx);

// do some drawings on the watched context
// --> they are performed also on the real context
watchedContext.beginPath();
watchedContext.moveTo(10, 10);
watchedContext.lineTo(100, 100);
watchedContext.stroke();

// clear context (not using the watched context to avoid recording)
ctx.clearRect(0,0,100,1000);

// replay what was recorded
watchedContext.replay();

您可以在这里看到：

http://jsbin.com/gehixavebe/2/edit?js,output

重放确实起作用，并且由于重放了存储的命令，因此重新绘制了该行。

对于脱机存储，您可以使用localStorage在本地存储命令，也可以使用AJAX调用或类似方法将它们远程存储在服务器上。