HTML5 中 canvas 绘图的撤销与反撤销功能实现

canvas 同时被 2 个专栏收录
1 篇文章 0 订阅
1 篇文章 0 订阅

实现原理:

  1. 保存快照:每完成一次绘制操作则保存一份 canvas 快照到 canvasHistory 数组(生成快照使用 canvas 的 toDataURL() 方法,生成的是 base64 的图片);
  2. 撤销和反撤销:把 canvasHistory 数组中对应索引的快照使用 canvas 的 drawImage() 方法重绘一遍;
  3. 绘制新图像:执行新的绘制操作时,删除当前位置之后的数组记录,然后添加新的快照。
// 变量定义
let myCanvas = document.querySelector('#myCanvas');
let ctx = myCanvas.getContext('2d');
let canvasWidth = 200;
let canvasHeight = 200;
let canvasHistory = [];
let step = -1;
// 绘制方法
canvasDraw() {
	step++;
    if (step < canvasHistory.length) {
    	canvasHistory.length = step; // 截断数组
    }
    // 执行绘制的相关操作(如绘制图片、线条等)
    // ...
    // ...
    canvasHistory.push(myCanvas.toDataURL()); // 添加新的绘制到历史记录
}
// 撤销方法
canvasUndo() {
  if (step >= 0) {
    step--;
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    let canvasPic = new Image();
    canvasPic.src = canvasHistory[step];
    canvasPic.addEventListener('load', () => {
      ctx.drawImage(canvasPic, 0, 0);
    });
  } else {
    console.log('不能再继续撤销了');
  }
}
// 反撤销方法
canvasRedo() {
  if (step < canvasHistory.length - 1) {
    step++;
    let canvasPic = new Image();
    canvasPic.src = canvasHistory[step];
    canvasPic.addEventListener('load', () => {
      ctx.clearRect(0, 0, canvasWidth, canvasHeight);
      ctx.drawImage(canvasPic, 0, 0);
    });
  } else {
    console.log('已经是最新的记录了');
  }
}

参考链接:
HTML5 canvas绘图的redo和undo功能的实现

  • 5
    点赞
  • 4
    评论
  • 7
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值