探究 canvas 绘图中撤销（undo）功能的实现方式详解
发布时间：2020-05-12 14:58:53 所属栏目：编程 来源：站长网
导读：副标题#e# 最近在做网页版图片处理相关的项目，也算是初入了 canvas 的坑。项目需求中有一个给图片添加水印的功能。我们知道，在浏览器端实现图片添加水印功能，通常的做法就是使用 canvas 的 drawImage 方法。对于普通的合成（比如一张底图和一张 PNG 水印
|
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) } } } } （编辑：核心网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
