HTML5 Canvas实战
4.9 旋转图像
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

平移画布上下文

旋转画布上下文

缩放画布上下文

创建镜像变换

创建自定义变换

切割画布上下文

使用栈处理多个变换

把圆变换为椭圆

旋转图像

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

旋转图像
图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标签:

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

工作原理

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

了解更多

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

相关参考

  • 创建镜像变换

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验