16-使玩家飞船绕中心旋转

8.7.1　使玩家飞船绕中心旋转

使玩家飞船绕中心旋转的代码与绕左上角旋转的代码非常接近，因此，用户所要做的就是修改转换位置。在例8-5中，将即时模式的绘图环境放在游戏对象的x轴和y轴坐标位置（50，50），使得物体绕左上角旋转。现在，必须将平移点移动到物体的中心。

context.translate(x+.5*width,y+.5*height);

提示

width和height变量表示被绘制的玩家飞船的属性。在例8-6中将创建这些属性。

除了以上的修改之外，还需要以此为中心点绘制飞船。为了实现这点，分别将每个路径绘制序列中的x属性减去宽度的一半，y属性减去高度的一半。

context.moveTo(10-.5*width,0-.5*height);
context.lineTo(19-.5*width,19-.5*height);

用这种方式绘制坐标会让人有一点困惑，而且这种方式的计算量比使用常量大。这里直接在代码中写入需要的数值。请记住，飞船的width和height属性都是20。在代码中直接写数值的硬编码版本如下所示。

context.moveTo(0,−10); //10-10, 0-10
context.lineTo(9,9); //19-10, 19-10

虽然用width和height变量计算这些数值的方法会更加灵活，但是使用硬编码的方法对处理器的消耗会更少。例8-6包含了使用两种方法的代码，将需要运算的版本进行注释。

例8-6　绕中心旋转图像

//canvasApp 级变量
　 var rotation = 0;
　 var x = 50;
　 var y = 50; var width = 20;
　 var height = 20;
　 function drawScreen(){
　　　// 绘制背景和文字
　　　context.fillStyle = '#000000';
　　　context.fillRect(0, 0, 200, 200);
　　　context.fillStyle = '#ffffff';
　　　context.font = '20px sans-serif';
　　　context.textBaseline = 'top';
　　　context.fillText ("Player Ship - rotate", 0, 180);
　　　// 形状变换
　　　var angleInRadians = rotation * Math.PI / 180;
　　　context.save(); //将当前画布状态保存到栈中
　　　context.setTransform(1,0,0,1,0,0); // 重置变换矩阵
　　　// 将画布原点平移到玩家飞船中心
　　　context.translate(x+.5*width,y+.5*height);
　　　context.rotate(angleInRadians);
　　　//绘制飞船
　　　context.strokeStyle = '#ffffff';
　　　context.beginPath();
　　　//将位置硬编码
　　　context.moveTo(0,-10);
　　　context.lineTo(9,9);
　　　context.lineTo(0,-1);
　　　context.moveTo(-1,-1);
　　　context.lineTo(-10,9);
　　　context.lineTo(-1,-10);
　　　/*
　　　//使用宽度和高度进行计算
　　　context.moveTo(10-.5*width,0-.5*height);
　　　context.lineTo(19-.5*width,19-.5*height);
　　　context.lineTo(10-.5*width,9-.5*height);
　　　context.moveTo(9-.5*width,9-.5*height);
　　　context.lineTo(0-.5*width,19-.5*height);
　　　context.lineTo(9-.5*width,0-.5*height);
　　　*/
　　　context.stroke();
　　　context.closePath();
　　　//恢复上下文
　　　context.restore(); //将旧的状态恢复到屏幕
　　　//增加旋转角度
　　　rotation++;
　 }