html5-canvas 快速绘制许多平移，缩放和旋转的图像

示例

在许多情况下，您想绘制旋转，缩放和平移的图像。旋转应围绕图像的中心发生。这是在2D画布上执行此操作的最快方法。这些功能非常适合2D游戏，在2D游戏中，每60秒要渲染几百个甚至多达1000多个图像。（取决于硬件）

// 假设画布上下文在ctx和范围内
function drawImageRST(image, x, y, scale, rotation){
    ctx.setTransform(scale, 0, 0, scale, x, y); // 设定比例和翻译
    ctx.rotate(rotation);                       // 增加旋转
    ctx.drawImage(image, -image.width / 2, -image.height / 2); // 绘制图像偏移其宽度和高度的一半
}

一个变体还可以包括对粒子系统有用的alpha值。

function drawImageRST_Alpha(image, x, y, scale, rotation, alpha){
    ctx.setTransform(scale, 0, 0, scale, x, y); // 设定比例和翻译
    ctx.rotate(rotation);                       // 增加旋转
   ctx.globalAlpha= alpha;
    ctx.drawImage(image, -image.width / 2, -image.height / 2); // 绘制图像偏移其宽度和高度的一半
}

重要的是要注意，这两个函数均使画布上下文处于随机状态。虽然这些功能不会受到其他渲染的影响。完成渲染图像后，您可能需要恢复默认转换

ctx.setTransform(1, 0, 0, 1, 0, 0); // 将上下文转换设置回默认值

如果您使用alpha版本（第二个示例），然后使用标准版本，则必须确保恢复了全局alpha状态

ctx.globalAlpha = 1;

使用上述功能渲染一些粒子和一些图像的示例

// 假设粒子包含粒子阵列
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);
    // 无需在循环中休息alpha
}
// 您需要重置Alpha，因为它可以是任何值 
ctx.globalAlpha = 1;

drawImageRST(myImage, 100, 100, 1, 0.5);  // 以100,100绘制图像
// 无需重置转换 
drawImageRST(myImage, 200, 200, 1, -0.5); // 以200,200绘制图像 
ctx.setTransform(1,0,0,1,0,0);            // 重置变换