캔버스 html5 컨텍스트로 드로잉

Question

컨텍스트에 모든 것을 그릴 수 있으며 나중에 캔버스에 연결할 수 있습니까? 예를 들어 10 개의 컨텍스트를 만든 다음 하나씩 캔버스에 그려야합니다.

Answer 1

재미있는 생각이지만, 할 수는 없습니다. 캔버스와 별도로 새 컨텍스트를 만들거나 컨텍스트를 캔버스에 지정할 수 없습니다.

당신이 할 수있는 일은 10 개의 캔버스를 동적으로 생성하는 것입니다 (문서에 첨부 할 필요가 없기 때문에 볼 수 없습니다). 그리고 필요할 때마다 하나의 캔버스를 다른 캔버스로 교체하십시오. 예 :

var canvas = document.getElementsByTagName('canvas')[0]; 
var frames = []; 
for (var i=0; i<10; ++i){ 
    var c = frames[i] = document.createElement('canvas'); 
    c.width = canvas.width; c.height = canvas.height; 
    var ctx = c.getContext('2d'); 
    // draw what you want here 
} 

var frame = 0; 
// Cycle through the canvases at 15fps 
setInterval(function(){ 
    var c = frames[++frame % frames.length]; 
    canvas.parentNode.replaceChild(c, canvas); 
    canvas = c; 
},1000/15);