Javascript 将画布片段保存在内存中，JS

如何将片段保存在内存中

var img = document.getElementById('img1');
ctx.save();
ctx.rotate(Math.PI / 180 * 45);
ctx.drawImage(img, 100, 100, img.width, img.height); 
ctx.restore(); 

现在我想将这个片段（已经旋转）保存到某个数组中，然后调用drawImage而不进行新的旋转

在JS和canvas中是真的吗？或者我每次都应该旋转图像，当我想画它的时候

var url = canvas.toDataURL(); 

可以帮助您将画布数据存储在内存中。之后可以从该url重新绘制。e、 g

img.src = url;
ctx.drawImage(img,0,0);

---

我假设你想要的是存储一个旋转的图像

要做到这一点，最简单的方法是创建一个画布，然后旋转绘制到该画布中：现在，您的旋转图像位于画布中，您可能希望将其转换为图像。
但是，如果使用来自另一个域的图像，则安全策略会阻止您从画布创建图像。因此，请确保仅在这种情况下使用画布

（thx@markE，供仔细阅读）

用于：

// during the init ...
var rotatedImage=getRotatedImage(myImage);

// ... later ...
ctx.drawImage(rotatedImage, ... , ...);

---

我能不能不保存所有画布，只保存最后绘制的元素？啊，是的，我明白你的意思。恐怕我不知道。我对HTML5和canvas的（有限的）知识表明你不能。你可以存储重新创建片段的指令，但这可能不令人满意。..Hm）如果我想每秒执行30次，它会杀死我的浏览器？）想一想，读得更好：你执行一次旋转，存储结果，当应用程序运行时，使用旋转的图像。

// during the init ...
var rotatedImage=getRotatedImage(myImage);

// ... later ...
ctx.drawImage(rotatedImage, ... , ...);