캔버스 내부에 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() 사용) 결과가 좋지 않습니다. 이는 캔버스의 결과가 벡터가 아니라 픽셀이기 때문입니다.

변환 된 컨텍스트에서 나중에 재생할 수 있도록 첫 번째 캔버스 컨텍스트에서 드로잉 명령을 트랩하고 기록해야합니다.