屏幕外的画布

很多时候，在使用画布时，你需要使用画布来保存一些内部像素数据。可以轻松创建屏幕外画布，获取 2D 上下文。屏幕外的画布也将使用可用的图形硬件进行渲染。

以下代码只是创建一个画布并用蓝色像素填充它。

function createCanvas(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    return canvas;
}

var myCanvas = createCanvas(256,256); // create a small canvas 256 by 256 pixels
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(0,0,256,256);

很多时候，屏幕外的画布将用于许多任务，你可能有很多画布。要简化画布的使用，可以将画布上下文附加到画布。

function createCanvasCTX(width, height){
    var canvas = document.createElement("canvas"); // create a canvas element
    canvas.width = width;
    canvas.height = height;
    canvas.ctx = canvas.getContext("2d");
    return canvas;
}
var myCanvas = createCanvasCTX(256,256); // create a small canvas 256 by 256 pixels
myCanvas.ctx.fillStyle = "blue";
myCanvas.ctx.fillRect(0,0,256,256);