html5 canvas 上撤销的问题

显示全部楼层 · 2021-1-27 05:23:46

谁有html5canvas撤销的方法或者例子帮助我一下

分 -->

千问 · 2021-1-27 05:23:46

可以每次画新东西之前把当前画面复制到另一个canvas中，撤销时只要从那个canvas中复制回来就可以了

千问 · 2021-1-27 05:23:46

最简单就是每一次绘画都是创建一个canvas叠在上面
否则你就要记录所有的绘画命令和参数

千问 · 2021-1-27 05:23:46

我问一下js中map为什么我初始化canvasmap最后一个元素空了
还有在js中json存数据好还是map好说说原因给我点思路谢谢大神们

千问 · 2021-1-27 05:23:46

引用3楼htmlApp880318的回复:我问一下js中map为什么我初始化canvasmap最后一个元素空了
还有在js中json存数据好还是map好说说原因给我点思路谢谢大神们
map是什么？数组？说清楚些。。。。。。。。。

千问 · 2021-1-27 05:23:46

map.js
和javamap相似

千问 · 2021-1-27 05:23:46

引用1楼jslang的回复:可以每次画新东西之前把当前画面复制到另一个canvas中，撤销时只要从那个canvas中复制回来就可以了
这是一种笨方法，你可以借鉴借鉴

千问 · 2021-1-27 05:23:46

调用restore函数，移除自上一次调用save方法以来所添加的任何效果，也就是撤销之前的变化
例子：
functiondraw()
{
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()方法
}

千问 · 2021-1-27 05:23:46

http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502151385.html

千问 · 2021-1-27 05:23:46

//变量定义
letmyCanvas=document.querySelector('#myCanvas');
letctx=myCanvas.getContext('2d');
letcanvasWidth=200;
letcanvasHeight=200;
letcanvasHistory=[];
letstep=-1;
//绘制方法
canvasDraw(){
step++;
if(step=0){
step--;
ctx.clearRect(0,0,canvasWidth,canvasHeight);
letcanvasPic=newImage();
canvasPic.src=canvasHistory[step];
canvasPic.addEventListener('load',()=>{
ctx.drawImage(canvasPic,0,0);
});
}else{
console.log('不能再继续撤销了');
}
}
//反撤销方法
canvasRedo(){
if(step{
ctx.clearRect(0,0,canvasWidth,canvasHeight);
ctx.drawImage(canvasPic,0,0);
});
}else{
console.log('已经是最新的记录了');
}
}