快速绘制许多已翻译的缩放和旋转图像

在许多情况下，你想要绘制旋转，缩放和平移的图像。旋转应围绕图像的中心进行。这是在 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