html5 canvas 上撤销的问题

奋斗者的痛 2015-06-24 02:51:41
谁有html5 canvas撤销的方法或者例子帮助我一下
...全文
577 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
cyndyxie 2019-04-30
  • 打赏
  • 举报
回复
// 变量定义
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('已经是最新的记录了');
}
}
cyndyxie 2019-04-30
  • 打赏
  • 举报
回复
http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502151385.html
业余草 2015-06-26
  • 打赏
  • 举报
回复
调用restore函数,移除自上一次调用save方法以来所添加的任何效果,也就是撤销之前的变化 例子:
  function draw()
{
    currentTime+=secondsBetweenFrames;
    sineWave=(Math.sin(currentTime)+1)/2;
    context.clearRect(0,0,canvas.width,canvas.height);//context的clearRect方法
    context.save();//context的save()方法
    context2D.translate(halfCanvasWidth - halfImageDemension, halfCanvasHeight - halfImageDemension);//context的translate()方法
    currentFunction();
    context.drawImage(image,0,0);//context的drawImage()方法
    context.restore();//context的restore()方法
}
业余草 2015-06-26
  • 打赏
  • 举报
回复
引用 1 楼 jslang 的回复:
可以每次画新东西之前把当前画面复制到另一个canvas中,撤销时只要从那个canvas中复制回来就可以了
这是一种笨方法,你可以借鉴借鉴
奋斗者的痛 2015-06-24
  • 打赏
  • 举报
回复
map.js 和 java map相似
天际的海浪 2015-06-24
  • 打赏
  • 举报
回复
引用 3 楼 htmlApp880318 的回复:
我问一下 js中map为什么我初始化canvas map最后一个元素空了 还有在js中json存数据好还是map好 说说原因给我点思路 谢谢大神们
map是什么?数组?说清楚些。。。。。。。。。
奋斗者的痛 2015-06-24
  • 打赏
  • 举报
回复
我问一下 js中map为什么我初始化canvas map最后一个元素空了 还有在js中json存数据好还是map好 说说原因给我点思路 谢谢大神们
KK3K2005 2015-06-24
  • 打赏
  • 举报
回复
最简单 就是 每一次绘画 都是创建一个canvas 叠在上面 否则你就要 记录所有的绘画命令和参数
天际的海浪 2015-06-24
  • 打赏
  • 举报
回复
可以每次画新东西之前把当前画面复制到另一个canvas中,撤销时只要从那个canvas中复制回来就可以了

39,082

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧