图像旋转html5,4.9 旋转图像 - HTML5 Canvas 实战

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

图4-11 旋转图像

绘制步骤

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

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标签：

工作原理

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

了解更多

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

相关参考

创建镜像变换