案例解读运用HTML5 Canvas API实际操作图型转动的方

2021-02-24 10:15 jianzhan

做为web开发设计者,我1直在和HTML5 canvas元素打交道。3D渲染照片是1个大的支系,10分关键并且很常见,因此,今日的实例教程是有关画布图象展现和怎样转动图象,说不确定是你如今真实要想的好物品。

总的来讲,canvas转动有两种方法:管理中心转动和参考点转动。娴熟运用转动作用,对你的开发设计著作会有巨大的协助。

有关目标的管理中心转动
第1个种类的转动,大家要看看是对在其中心转动1个目标。完成应用画布元素,这是1个最简易的转动种类。大家把1只大猩猩的照片做为素材开展实验。
基础的念头是,大家要把帆布依照1个管理中心点转动,转动画布,随后把画布返回原先的部位。假如你有1些工作经验有关图型模块,那末这听起来应当很熟习。编码大约便是这样:(点一下看实际效果)

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.   }     

注解早已十分详尽,但我依然想提1点:.save()和.restore()。她们的功效是储存转动以前的画布,随后转动后修复。合理地防止了和别的3D渲染矛盾,10分重要,很多盆友沒有圆满开展转动,大多数全是这个缘故。

紧紧围绕某个点转动
第2个种类是图象紧紧围绕室内空间的某个点开展转动,这将变得较为繁杂。可为何要这样做呢?许多状况下,你必须把目标参考另外一个目标转动,单1的紧紧围绕管理中心转动没法考虑要求。并且后者会更常见,例如在做网页页面手机游戏中,常常会用到转动。


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.   }  

编码简约,功效是把1张照片依照1个点转动了120度,这张照片更形象。

绘图魔性Logo
这是在度娘上看到了1个logo,恰当应用了转动转换,用1个很简易矩形框,根据转动转换,变为了1个很好看的logo。这logo是否很有魔性?童鞋们动动脑,尝试完成1下它。下面,出示我完成它的编码。

JavaScript Code拷贝內容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF⑻">   
  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?!赶紧换1个吧!!   
  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, ⑵00, 200, 200);   
  33.             context.restore();   
  34.         }   
  35.     };   
  36. </script>   
  37. </body>   
  38. </html>  

运作結果:

是否十分的酷?这个图型略微剖析1下发现還是蛮简易的,便是让1个正放形,以显示屏中点(即原始正方形左下角端点)为圆心开展转动。

造型艺术是否很美好?大伙儿1定和感受到了Canvas的奇特,简简易单的几行编码就可以完成无限无穷的实际效果。要是脑洞够大,沒有甚么是不能以完成的。因此,扬起我们的造型艺术家的旗帜,加速脚步,再次前行!