HTML5 canvas更改的历史记录

我正在使用canvas开发基于HTML5的绘画应用程序，现在我想要对所有canvas的更改进行记录。我的意思是用户行为的历史。HTML5 canvas更改的历史记录

我该怎么做？

2011-07-24 Mark

将数据网址保存到数组中：http://jsfiddle.net/eGjak/54/。

var cv = $('#cv').get(0); 
var ctx = cv.getContext('2d'); 

var history = []; 

$("#b1").click(function() { 
    history.push(cv.toDataURL()); 

    ctx.beginPath(); 

    ctx.arc(Math.random() * 200 + 100, 
      Math.random() * 200 + 100, 
      Math.random() * 200, 
      0, 
      2 * Math.PI); 

    ctx.stroke(); 
}); 

$("#b2").click(function() { 
    ctx.beginPath(); 

    var img = new Image; 

    img.onload = function() { 
     ctx.clearRect(0, 0, 400, 400); 
     ctx.drawImage(img, 0, 0); 
    }; 

    img.src = history.pop(); 
});

来源

2011-07-24 11:30:19 pimvdb

你认为，那不会有与RAM问题？如果用户将执行很多操作.. – Mark

@Mark：这是正确的，具体取决于您的画布大小。但是，每个动作都会占用相同的内存量，因为只保存像素（绘图的复杂程度无关紧要，只是大小很重要）。我的小提琴不会阻塞太多的记忆。 – pimvdb

谢谢你，非常感谢你 – Mark

你可能会尝试做的是创建一个事件数组，并在每次onclick（或您最感兴趣的事件）发生时填充它。这样，您就拥有了所有用户输入的历史记录。

您也可以不仅仅存储事件，而是存储正在使用的工具，以简化之前状态下的重绘。

这就是你想要的吗？

来源

2011-07-24 11:29:51

虽然这是我的第一个念头为好，这可能会伤害撤销过程（强迫你一遍重做整个用户操作） – sternr

HTML5 canvas更改的历史记录

回答

相关问题