详解通过HTML5 Canvas实现图片的平移及旋转变化的方法


Posted in HTML / CSS onMarch 22, 2016

平移变换translate()
平移变换,故名思议,就是一般的图形位移。比如这里我想将位于(100,100)的矩形平移至(200,200)点。那么我只要在绘制矩形之前加上context.translate(100,100)即可。

这里的translate()只传入两个参数,其实就是新画布坐标系原点的坐标。下面结合代码来看看效果。

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="zh">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>平移变换</title>  
  6.     <style>  
  7.         body { background: url("./images/bg3.jpg") repeat; }   
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>  
  10. </head>  
  11. <body>  
  12. <div id="canvas-warp">  
  13.     <canvas id="canvas">  
  14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  15.     </canvas>  
  16. </div>  
  17.   
  18. <script>  
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         context.fillStyle = "#00AAAA";   
  28.         context.fillRect(100,100,200,100);   
  29.   
  30.         context.fillStyle = "red";   
  31.         context.translate(100,100);   
  32.         context.fillRect(100,100,200,100);   
  33.   
  34.     };   
  35. </script>  
  36. </body>  
  37. </html>  

运行结果:
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法

这里的蓝色矩形,是矩形原来的位置,然后调用translate()方法,将矩形位移至(200,200),即红色矩形的位置。我们来用一张图看看,它是怎么做到平移变换的。
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法

没错,其实这里的平移变换实质就是在平移坐标系,而对translate()传入的参数,实质就是新坐标系相对于旧坐标系的原点。这使得我们依旧是在(100,100)绘制的红色矩形,在平移坐标系之后,变到了(200,200)处。

注意使用状态保存:
其实这里有一个坑,我们如果想把矩形平移至(300,300)怎么办呢?或许我们会想,直接调用context.translate(200,200)就可以了。好,我们看看效果。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>平移变换</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         context.fillStyle = "#00AAAA";   
  28.         context.fillRect(100,100,200,100);   
  29.   
  30.         context.fillStyle = "red";   
  31.         context.translate(100,100);   
  32.         context.fillRect(100,100,200,100);   
  33.   
  34.         context.fillStyle = "green";   
  35.         context.translate(200,200);   
  36.         context.fillRect(100,100,200,100);   
  37.   
  38.     };   
  39. </script>   
  40. </body>   
  41. </html>  

运行结果:
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法

这里的绿色矩形并没有如我们所愿在(300,300)位置处,而是跑到了(400,400)这里。为什么呢?想必大家已经知道了答案——Canvas是基于状态的绘制。在我们第一次平移之后,坐标系已经在(100,100)处了,所以如果继续平移,这个再基于新坐标系继续平移坐标系。那么要怎么去解决呢?很简单,有两个方法。

第一,在每次使用完变换之后,记得将坐标系平移回原点,即调用translate(-x,-y)。

第二,在每次平移之前使用context.save(),在每次绘制之后,使用context.restore()。

切记,千万不要再想着我继续紧接着第一次平移之后再平移translate(100,100)不就行了,这样你自己的坐标系就会乱套,根本找不到自己的坐标系原点在哪,在多次变换或者封装函数之后,会坑死你。所以一定要以最初状态为最根本的参照物,这是原则性问题。这里我建议使用第二种方法,而且在涉及所有图形变换的时候,都要这么处理,不仅仅是平移变换。

具体使用如下。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>平移变换</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         context.fillStyle = "#00AAAA";   
  28.         context.fillRect(100,100,200,100);   
  29.   
  30.         context.save();   
  31.         context.fillStyle = "red";   
  32.         context.translate(100,100);   
  33.         context.fillRect(100,100,200,100);   
  34.         context.restore();   
  35.   
  36.         context.save();   
  37.         context.fillStyle = "green";   
  38.         context.translate(200,200);   
  39.         context.fillRect(100,100,200,100);   
  40.         context.restore();   
  41.   
  42.     };   
  43. </script>   
  44. </body>   
  45. </html>  

运行结果:
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法

因此,在使用图形变换的时候,要记得结合使用状态保存。

旋转变换rotate()

同画圆弧一样,这里的rotate(deg)传入的参数是弧度,不是角度。同时需要注意的是,这个的旋转是以坐标系的原点(0,0)为圆心进行的顺时针旋转。所以,在使用rotate()之前,通常需要配合使用translate()平移坐标系,确定旋转的圆心。即,旋转变换通常搭配平移变换使用的。

最后一点需要注意的是,Canvas是基于状态的绘制,所以每次旋转都是接着上次旋转的基础上继续旋转,所以在使用图形变换的时候必须搭配save()与restore()方法,一方面重置旋转角度,另一方面重置坐标系原点。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>旋转变换</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.   
  28.         for(var i = 0; i <= 12; i++){   
  29.             context.save();   
  30.             context.translate(70 + i * 50, 50 + i * 40);   
  31.             context.fillStyle = "#00AAAA";   
  32.             context.fillRect(0,0,20,20);   
  33.             context.restore();   
  34.   
  35.             context.save();   
  36.             context.translate(70 + i * 50, 50 + i * 40);   
  37.             context.rotate(i * 30 * Math.PI / 180);   
  38.             context.fillStyle = "red";   
  39.             context.fillRect(0,0,20,20);   
  40.             context.restore();   
  41.         }   
  42.   
  43.     };   
  44. </script>   
  45. </body>   
  46. </html>  

运行结果:
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法

这里用for循环绘制了14对正方形,其中蓝色是旋转前的正方形,红色是旋转后的正方形。每次旋转都以正方形左上角顶点为原点进行旋转。每次绘制都被save()与restore()包裹起来,每次旋转前都移动了坐标系。童鞋们可以自己动动手,实践一下,就能体会到旋转变换的奥妙了。

HTML / CSS 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
html5组织内容_动力节点Java学院整理
Jul 10 HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
html form表单基础入门案例讲解
Jul 15 HTML / CSS
css实现左上角飘带效果的完整代码
Mar 18 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 #HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 #HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 #HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 #HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 #HTML / CSS
利用HTML5 Canvas API绘制矩形的超级攻略
Mar 21 #HTML / CSS
HTML5 画布canvas使用方法
Mar 18 #HTML / CSS
You might like
什么是短波收听SWL
2021/03/01 无线电
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
获取表单控件原始(初始)值的方法
2013/08/21 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
Angular4自制一个市县二级联动组件示例
2017/11/21 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
基于vue打包后字体和图片资源失效问题的解决方法
2018/03/06 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
Python FTP操作类代码分享
2014/05/13 Python
Python使用MD5加密字符串示例
2014/08/22 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
Pytest测试框架基本使用方法详解
2020/11/25 Python
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
俄罗斯旅游网站:Tripadvisor俄罗斯
2017/03/21 全球购物
John Hardy官方网站:手工设计首饰的奢侈品牌
2017/07/05 全球购物
俄罗斯汽车零件和配件在线商店:CarvilleShop
2019/11/29 全球购物
服装设计行业个人的自我评价
2013/12/20 职场文书
员工薪酬福利制度
2014/01/17 职场文书
关于建议书的格式范文
2014/05/20 职场文书
会议营销主持词
2015/07/03 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
python运算符之与用户交互
2022/04/13 Python
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android