4.9 旋转图像

本节，我们通过平移和旋转画布上下文来旋转图像，然后在变换后的上下文中绘制图像。

绘制步骤

按照以下步骤，来旋转图像：

1. 定义画布上下文：

window.onload = function(){
  var canvas  = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");

2. 新建一个image对象，并设置其onload属性：

  var imageObj  = new Image();
  imageObj.onload  = function(){

3. 当图像加载完成后，把画布上下文平移到画布的中央，将画布上下文逆时针方向旋转45°，在绘制该图像：

  //把画布上下文平移到画布的中央
  context.translate(canvas.width  /  2, canvas.height  /  2);
  //把画布上下文逆时针方向旋转45°
  context.rotate(-1  * Math.PI  /  4);
  context.drawImage(this,  -1  * imageObj.width  /  2,  -1  * imageObj.height  /  2);
};

4. 设置图像的源地址：

  imageObj.src  = "jet_300x214.jpg";
};

5. 在HTML文档的body部分嵌入canvas标签：

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;"> 
</canvas> 

工作原理

要旋转图像，我们可以简单地调用translate()方法，把上下文平移到想要的位置，调用rotate()方法旋转画布上下文，然后调用drawImage()方法绘制图像。

了解更多

值得注意的是，除了旋转图像外，对图像的另一个常见变换是镜像变换。要进行图像镜像变换，我们可以平移画布上下文到想要的位置，通过scale(-1,1)方法在水平方向上翻转画布上下文，或通过scale(1,-1)方法在垂直方向上翻转画布上下文，然后使用drawImage()来绘制图像。

相关参考

• 创建镜像变换