实例讲解利用HTML5 Canvas API操作图形旋转的方法


Posted in HTML / CSS onMarch 22, 2016

作为web开发者,我一直在和HTML5 canvas元素打交道。渲染图片是一个大的分支,十分重要而且很常用,所以,今天的教程是关于画布图像展示以及如何旋转图像,说不定是你现在真正想要的好东西。

总的来说,canvas旋转有两种方式:中心旋转和参照点旋转。熟练应用旋转功能,对你的开发作品会有极大的帮助。

关于对象的中心旋转
第一个类型的旋转,我们要看看是对其中心旋转一个对象。实现使用画布元素,这是一个最简单的旋转类型。我们把一只大猩猩的图片作为素材进行试验。
基本的想法是,我们要把帆布按照一个中心点旋转,旋转画布,然后把画布回到原来的位置。如果你有一些经验关于图形引擎,那么这听起来应该很熟悉。代码大概就是这样:(点击看效果)

JavaScript Code复制内容到剪贴板
  1. function onload() {   
  2.     var canvas = document.getElementById('c1');   
  3.     var ctx1 = canvas.getContext('2d');   
  4.     var image1 = new Image();   
  5.     image1.onload = function() {   
  6.       // regular rotation about center   
  7.       var xpos = canvas.width/2;   
  8.       var ypos = canvas.height/2;   
  9.       ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);   
  10.       ctx1.save();   
  11.       ctx1.translate(xpos, ypos);   
  12.       ctx1.rotate(47 * Math.PI / 180);//旋转47度   
  13.       ctx1.translate(-xpos, -ypos);   
  14.       ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);   
  15.       ctx1.restore();   
  16.     }   
  17.     image1.src = 'image.png';   
  18.   }     

实例讲解利用HTML5 Canvas API操作图形旋转的方法

注释已经非常详细,但我仍旧想提一点:.save()和.restore()。他们的作用是保存旋转之前的画布,然后旋转后恢复。有效地避免了和其他渲染冲突,十分关键,许多朋友没有顺利进行旋转,大多都是这个原因。

围绕某个点旋转
第二个类型是图像围绕空间的某个点进行旋转,这将变得比较复杂。可为什么要这样做呢?很多情况下,你需要把对象参照另一个对象旋转,单一的围绕中心旋转无法满足需求。而且后者会更常用,比如在做网页游戏中,经常会用到旋转。

实例讲解利用HTML5 Canvas API操作图形旋转的方法
JavaScript Code复制内容到剪贴板

  1. function onload() {   
  2.     var canvas2 = document.getElementById('c2');   
  3.     var ctx2 = canvas2.getContext('2d');   
  4.     // regular rotation about point   
  5.     var image2 = new Image();   
  6.     image2.onload = function() {   
  7.       // regular rotation about a point   
  8.       var angle = 120 * Math.PI / 180; // angle of rotation in radians   
  9.       var rx = 300, ry = 200; // the rotation x and y   
  10.       var px = 300, py = 50; // the objects center x and y   
  11.       var radius = ry - py; // the difference in y positions or the radius   
  12.       var dx = rx + radius * Math.sin(angle); // the draw x    
  13.       var dy = ry - radius * Math.cos(angle); // the draw y   
  14.       ctx2.drawImage(image2, 300 - image2.width / 2, 50 - image2.height / 2);   
  15.       ctx2.beginPath();   
  16.       ctx2.arc(300,200,5,0,Math.PI*2,false);   
  17.       ctx2.closePath();   
  18.       ctx2.fillStyle = 'rgba(0,255,0,0.25)';   
  19.       ctx2.fill();   
  20.          
  21.       ctx2.save();   
  22.       ctx2.translate(dx, dy);   
  23.       ctx2.rotate(angle);   
  24.       ctx2.translate(-dx, -dy);   
  25.       ctx2.drawImage(image2, dx - image2.width / 2, dy - image2.height / 2);   
  26.       ctx2.restore();   
  27.     }   
  28.     image2.src = 'smallimage.png';   
  29.   }  

实例讲解利用HTML5 Canvas API操作图形旋转的方法

代码简洁,作用是把一张图片按照一个点旋转了120度,这张图片更形象。

绘制魔性Logo
这是在度娘上看到了一个logo,巧妙运用了旋转变换,用一个很简单矩形,通过旋转变换,变成了一个很漂亮的logo。这logo是不是很有魔性?童鞋们动动脑,尝试实现一下它。下面,提供我实现它的代码。

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>绘制魔性Logo</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.         for(var i=1; i<=10; i++){   
  28.             context.save();   
  29.             context.translate(400,300);   
  30.             context.rotate(36 * i * Math.PI / 180);   
  31.             context.fillStyle = "rgba(255,0,0,0.25)";   
  32.             context.fillRect(0, -200, 200, 200);   
  33.             context.restore();   
  34.         }   
  35.     };   
  36. </script>   
  37. </body>   
  38. </html>  

运行结果:
实例讲解利用HTML5 Canvas API操作图形旋转的方法

是不是非常的酷?这个图形稍微分析一下发现还是蛮简单的,就是让一个正放形,以屏幕中点(即初始正方形左下角顶点)为圆心进行旋转。

艺术是不是很美妙?大家一定以及体会到了Canvas的奇妙,简简单单的几行代码就能实现无穷无尽的效果。只要脑洞够大,没有什么是不可以实现的。所以,扬起咱们的艺术家的旗帜,加快步伐,继续前进!

HTML / CSS 相关文章推荐
CSS3中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
CSS3制作日历实现代码
Jan 21 HTML / CSS
CSS3实现网站商品展示效果图
Jan 18 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
Dec 13 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
Jul 24 HTML / CSS
AmazeUI的下载配置与Helloworld的实现
Aug 19 HTML / CSS
HTML5中input输入框默认提示文字向左向右移动的示例代码
Sep 10 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 #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
You might like
模仿OSO的论坛(三)
2006/10/09 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
PHP代码实现表单数据验证类
2015/07/28 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
利用PHP获取访客IP、地区位置、浏览器及来源页面等信息
2017/06/27 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
jQuery 无限级菜单的简单实例
2014/02/21 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)
2017/06/04 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
微信小程序实现红包雨功能
2018/07/11 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
Python中asyncore的用法实例
2014/09/29 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
Django+Django-Celery+Celery的整合实战
2021/01/20 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
NFL墨西哥官方商店:Tienda NFL
2017/11/28 全球购物
银行会计职员个人的自我评价
2013/09/29 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
明确岗位职责
2015/02/14 职场文书
环保宣传语大全
2015/07/13 职场文书
Sql-Server数据库单表查询 4.3实验课
2021/04/05 SQL Server
Python序列化与反序列化相关知识总结
2021/06/08 Python