在画布内渲染 HTML 画布

Question

我需要解决一个复杂的情况，我已经有一个Canvas element 用某种文本行等渲染。我不知道它是如何渲染的以及以何种方式渲染的。但现在我需要设置旋转、缩放等的转换。

var canvas = document.getElementById("item1-canvas");
var ctx = canvas.getContext("2d");

var angle1 = 0.1;
var angle2 = 0.14;
var cs = Math.cos(angle1), sn = Math.sin(angle1);
var h = Math.cos(angle2);

var a = 100*cs, b = -100*sn, c = 200;
var d = h*100*sn, e = h*100*cs, f = 200;

ctx.setTransform(a, d, b, e, c, f);

当我设置变换或任何东西时，画布被清除并需要重新绘制，但我不知道第一次绘制的确切机制。为了解决这个问题，我想到了在另一个画布中渲染一个画布，这样初始画布就不需要以任何方式呈现。我们可以设置第二个画布的变换。

我该怎么做？

Answer 1

如果您将一个（位图）画布渲染到另一个（使用drawImage()）只是为了引入转换，您将得到糟糕的结果。这是因为画布的结果不是矢量，而是像素。

您需要在第一个画布上下文中捕获和记录绘图命令，以便稍后在转换后的上下文中重播它们。