画布存储和旋转图像

Question

我目前正在与HTML5和大量Javascript一起构建HTML5塔防游戏。目前我可以在我的Nexus 6p上以60FPS绘制+/- 2000（可能更多）对象。实现这一目标的技巧是绘制图像而不是使用铅笔。

解决方案1 ​​

当我想旋转敌人，炮塔或子弹图像时，我使用以下代码生成图像：

function calculateRotateImages(name, imagesrc, destination, drawheight = 50, drawwidth = 50)
{
	var images = [];

	var image = new Image();

	image.onload = function(){           
		
		rotate(0);
		function rotate(i)
		{
			imageCtx.clearRect(0, 0, 50, 50);
			imageCtx.save();
			imageCtx.translate(25, 25);
			imageCtx.rotate(i * TO_RADIANS);
			imageCtx.drawImage(image, -(drawheight / 2), -(drawwidth / 2), drawheight, drawheight);
			imageCtx.restore();

			var saveImage = new Image();         
			saveImage.onload = function(){
				images.push(saveImage);

				if(images.length != 360)
				{	
					i +=1
					rotate(i);
				}
			};
			saveImage.src = imageCanvas.toDataURL();
		}
	}

	image.src = imagesrc;

	var item = {
					name : name,
					images : images	                    
			   };
	destination.push(item);
}

这是我在加载页面时所做的第一件事，这将导致一个长度为360（360度）的数组。这引出了我的问题;通过这种方式，我可以实现我想要的，但我不知道这是否是正确的方法。例如，destionation [179]给了我一个旋转180度的框架。

解决方案2

另一种解决方案是在隐藏的画布（spritesheet）上绘制所有图像，并在需要时剪切一帧。我不知道这会对性能产生什么影响。什么是更好的解决方案？