使用Java脚本存储和还原画布

我想使用JavaScript存储(以某种方式记住)canvas Element的当前状态(显示的图像),然后稍后将其还原.

var cvSave;  //Global variable to save ImageData

function function1(){
//some stuff wich involes putting an image into a canvas
cvSave = context.getImageData(0,0,viewport.width, viewport.height);
// All the variables are existing and I use the context to put Stuff into the canvas which works fine
}

function isCalledLater(){
var canvas = document.getElementById('cv');
var ctx = canvas.getContext('2d');          //Get canvas and context
ctx.putImageData(cvSave,0,0);               //So this should restore the canvas to what I save earlier, right?
}

但是,当调用第二个函数时,它只会将画布变成白色,而不会还原到我认为我保存在cvSave中的内容.

我希望这是客户端,我想将其恢复到我多次保存的状态.

还原画布后,它也很重要(我一开始就忘记了),我想使用Processing.js在还原图像的顶部绘制,然后我希望能够再次进行.

感谢您的帮助.

解决方法:

嘿,尝试一下..

var cvSave;  //Global variable to save ImageData

function function1(){
//some stuff wich involes putting an image into a canvas
context.save();
// All the variables are existing and I use the context to put Stuff into the canvas which works fine
}

function isCalledLater(){
var canvas = document.getElementById('cv');
var ctx = canvas.getContext('2d');          //Get canvas and context
ctx.restore(); //So this should restore the canvas to what I save earlier, right?
ctx.save();  // this will save once again           
}

标签：html5-canvas,javascript
来源： https://codeday.me/bug/20191031/1973546.html