визуализировать 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()), чтобы ввести трансформацию, вы получите плохие результаты. Это связано с тем, что результаты холста не являются векторами, а пикселями.

Вам нужно уловить и записать команды рисования в первом контексте холста, чтобы вы могли воспроизвести их позже в преобразованном контексте.