网页制作

实例讲解利用HTML5 Canvas API操作图形旋转的方法
网页制作 2024/12/23 佚名
3 2

作为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的奇妙，简简单单的几行代码就能实现无穷无尽的效果。只要脑洞够大，没有什么是不可以实现的。所以，扬起咱们的艺术家的旗帜，加快步伐，继续前进！

标签：
HTML5,Canvas,旋转
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com