探究 canvas 绘图中撤销（undo）功能的实现方式详解(3)

class WrappedCanvas { constructor (canvas) { this.ctx = canvas.getContext('2d'); this.width = this.ctx.canvas.width; this.height = this.ctx.canvas.height; this.executionArray = []; } drawImage (...params) { this.executionArray.push({ method: 'drawImage', params: params }); this.ctx.drawImage(...params); } clearCanvas () { this.ctx.clearRect(0, 0, this.width, this.height); } undo () { if (this.executionArray.length > 0) { // 清空画布 this.clearCanvas(); // 删除当前操作 this.executionArray.pop(); // 逐个执行绘图动作进行重绘 for (let exe of this.executionArray) { this[exe.method](...exe.params) } } } }

（编辑：ASP站长网）