搜索
热搜： Python 编程 PHP vue dedecms
首页> 前端开发 > HTML5 > 正文

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

发布时间：2022-12-31 10:56:56 来源：互联网
.
热爱工作，投身事业，在这一过程中，抑制私心，陶冶人格，同时积累经验，提高能力。这样，才能获得周围人们的信任和尊敬。

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

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

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

JavaScript Code复制内容到剪贴板
  1. functiononload(){
  2. varcanvas=document.getElementById('c1');
  3. varctx1=canvas.getContext('2d');
  4. varimage1=newImage();
  5. image1.onload=function(){
  6. //regularrotationaboutcenter
  7. varxpos=canvas.width/2;
  8. varypos=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. }

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

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


JavaScript Code复制内容到剪贴板

  1. functiononload(){
  2. varcanvas2=document.getElementById('c2');
  3. varctx2=canvas2.getContext('2d');
  4. //regularrotationaboutpoint
  5. varimage2=newImage();
  6. image2.onload=function(){
  7. //regularrotationaboutapoint
  8. varangle=120*Math.PI/180;//angleofrotationinradians
  9. varrx=300,ry=200;//therotationxandy
  10. varpx=300,py=50;//theobjectscenterxandy
  11. varradius=ry-py;//thedifferenceinypositionsortheradius
  12. vardx=rx+radius*Math.sin(angle);//thedrawx
  13. vardy=ry-radius*Math.cos(angle);//thedrawy
  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();
  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. }

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

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

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <htmllang="zh">
  3. <head>
  4. <metacharset="UTF-8">
  5. <title>绘制魔性Logo</title>
  6. <style>
  7. body{background:url("./images/bg3.jpg")repeat;}
  8. #canvas{border:1pxsolid#aaaaaa;display:block;margin:50pxauto;}
  9. </style>
  10. </head>
  11. <body>
  12. <divid="canvas-warp">
  13. <canvasid="canvas">
  14. 你的浏览器居然不支持Canvas？！赶快换一个吧！！
  15. </canvas>
  16. </div>
  18. <script>
  19. window.onload=function(){
  20. varcanvas=document.getElementById("canvas");
  21. canvas.width=800;
  22. canvas.height=600;
  23. varcontext=canvas.getContext("2d");
  24. context.fillStyle="#FFF";
  25. context.fillRect(0,0,800,600);
  27. for(vari=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>

运行结果：

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

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

到此这篇关于实例讲解如何利用HTML5 Canvas API操作图形旋转的方法就介绍到这了。股票有涨有落，然而打着信心标志的股票将使你永涨无落。更多相关实例讲解如何利用HTML5 Canvas API操作图形旋转的方法内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

以下您可能有感兴趣的文章:
标签： Canvas API
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图