快速繪製許多已翻譯的縮放和旋轉影象

在許多情況下，你想要繪製旋轉，縮放和平移的影象。旋轉應圍繞影象的中心進行。這是在 2D 畫布上執行此操作的最快方法。這些功能非常適合 2D 遊戲，期望每 60 秒渲染幾百甚至 1000 多個影象。 （取決於硬體）

// assumes that the canvas context is in ctx and in scope
function drawImageRST(image, x, y, scale, rotation){
    ctx.setTransform(scale, 0, 0, scale, x, y); // set the scale and translation
    ctx.rotate(rotation);                       // add the rotation
    ctx.drawImage(image, -image.width / 2, -image.height / 2); // draw the image offset by half its width and height
}

變體還可以包括對粒子系統有用的α值。

function drawImageRST_Alpha(image, x, y, scale, rotation, alpha){
    ctx.setTransform(scale, 0, 0, scale, x, y); // set the scale and translation
    ctx.rotate(rotation);                       // add the rotation
    ctx.globalAlpha = alpha;
    ctx.drawImage(image, -image.width / 2, -image.height / 2); // draw the image offset by half its width and height
}

值得注意的是，兩個函式都將畫布上下文保留為隨機狀態。雖然功能不會影響其他渲染我的。完成渲染影象後，可能需要恢復預設變換

ctx.setTransform(1, 0, 0, 1, 0, 0); // set the context transform back to the default 

如果你使用 alpha 版本（第二個示例）然後使用標準版本，則必須確保恢復全域性 alpha 狀態

ctx.globalAlpha = 1;

使用上述函式渲染一些粒子和一些影象的示例

// assume particles to contain an array of particles
for(var i = 0; i < particles.length; i++){
    var p = particles[i];
    drawImageRST_Alpha(p.image, p.x, p.y, p.scale, p.rot, p.alpha);
    // no need to rest the alpha in the loop
}
// you need to reset the alpha as it can be any value 
ctx.globalAlpha = 1;

drawImageRST(myImage, 100, 100, 1, 0.5);  // draw an image at 100,100
// no need to reset the transform 
drawImageRST(myImage, 200, 200, 1, -0.5); // draw an image at 200,200 
ctx.setTransform(1,0,0,1,0,0);            // reset the transform