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()）只是为了引入转换，您将得到不好的结果。这是因为画布的结果不是矢量，而是像素。

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

在画布中呈现HTML画布

1 个答案: