探究 canvas 绘图中撤销（undo）功能的实现方式详解
发布时间：2020-05-12 06:37:36 所属栏目：编程 来源：站长网
导读：副问题#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) } } } } （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
