canvas 想要删除之前操作的某一步 遇到的困惑以及解决方案

本文未粘贴具体的canvas代码，只是将自己的实现思路作为分享。具体的canvas的基本操作请参考专业的文档

操作步骤如图：添加一个标记记录一步，上边操作一个记录了3步。然后正常业务是，操作中随时需要取消其中一步，比如要取消的第二部操作。那剩余的操作也就是第一步跟第三步。于此同时，页面的标记也要只留下第一步第三步。效果如下

总结：下部的文字部分操作很简单，就是数据的追加与删除操作，这里主要说明一下canvas的操作步骤

1.起初想的是用canvas自己的api实现操作，使用以下的两个方法配合实现效果，但是经过一番折腾再折腾，发现根本实现不了，或者能实现但是我没研究透。所以改变了策略

ctx.getImageData(x, y, width, height);

ctx.putImageData(imagedata, dx, dy)

2.使用的方法：将canvas绘制的每一步操作都记录下载，并放入到一个数组中，数组结构如下

this.canvas_history = [

{label:''齿轮破损",x1:200,y1:200,x2:300,y2:300},

{label:''齿轮缺齿",x1:200,y1:200,x2:300,y2:300},

]

3. 当做追加操作的时候，直接将数据push进去。删除操作的时候，找到删除的数据，并从this.canvas_history中删除，然后再利用剩余的this.canvas_history数据，对canvas进行重新的绘制，就可以实现操作。

反思：getImageData（）此方法记录的是一个整体的操作，也就是画布当前的所有行为，如果想利用这个方法的话，那么只能记录到某一时刻，画布上的所有行为，在这一时刻只有的画布行为是记录不到的。所以采用这个方法实现不了自己项目中的业务需求。但是这个方法可以实现类似于Photoshop的历史记录的功能。

理解：canvas 是一个比较轻量级的工具，所以无法像地图操作（openlayer、arcgis......）那么可以灵活的获取或者移除layer，它无法记录单独的某一步操作，只能记录一个整体的操作

所以使用工具就的有取舍，地图操作很方便但是比较重量级，canvas比较轻量化，但是使用起来有时候并没有想象的那么方便。因此做项目之前一定要做整体的需求分析，避免后期因为一些小问题的出现，而不得不去重新更换插件的糟心事。