在畫布內渲染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() ）只是為了引入轉換，您將得到較差的結果。 這是因為畫布的結果不是矢量，而是像素。

您需要在第一個畫布上下文中捕獲並記錄繪圖命令，以便以后可以在轉換后的上下文中重播它們。