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); //重置变换