canvas html5 drawing into context

c开发者_运维百科an i draw everything to a context and then associate it to the canvas later ? for example, i wanna create 10 contexts and then draw them one by one in the canvas

It's an interesting idea, but no, you cannot do that. You cannot create a new context independent of a canvas, nor assign a context to a canvas.

What you can do is create 10 canvases dynamically (you don't have to append them to the document, so they won't be visible) and then swap out one canvas for another when you need. For example:

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);