坦克大战的性能优化

1、requestAnimationFrame

https://mp.csdn.net/mdeditor/84192545#

2、rotate

网上下载的图片资源(每张4KB，尺寸60*60)：

用键盘上下左右控制坦克时，相对应的炮筒朝向也要发生改变；
drawTank()的绘制过程是在raf中持续进行的，相当于每过17ms的时间就要加载一张图片，耗时严重。
想到通过将初始图片旋转90，180，270度，来获得其他的图片；
translate()

translate(x,y);// 将画布的原点移动到指定（x,y）位置

rotate()

rotate(angle);// 按照顺时针旋转，以弧度为单位的值：Math.PI / 180 * 45

例子：

var can1 = document.getElementById("canvas1");
		var context = can1.getContext('2d');

		var x      = 50;
		var y      = 100;
		var width  = 60;
		var height = 60
		var cx     = x + 0.5 * width;   // x of shape center
		var cy     = y + 0.5 * height;  // y of shape center
		var img = new Image();
		img.src ="img/enemy3D.jpg";
		img.onload = function(){
			context.drawImage(img,50,100);
		}
		context.translate(cx, cy);              //translate to center of shape
		context.rotate( (Math.PI / 180) * 180);  //rotate 180 degrees.
		context.translate(-cx, -cy);       //translate center back to 0,0

结果：

注意：

ctx1.save();
	tank.drawTank();
	ctx1.restore();

每次drawTank()之前都应该复原初始状态；
使用rotate()，仅仅是对图片做了一次矩阵变换；