当前位置:  首页  >  前端开发  >  Html5

实例讲解利用HTML5CanvasAPI操作图形旋转的方法_html5教程技巧

这篇文章主要介绍了利用HTML5CanvasAPI操作图形旋转的方法的实例讲解,包括图片自身的中心坐标位置旋转以及围绕某个点的旋转例子,需要的朋友可以参考下
作为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. }
2016322114126609.gif (383×384) 注释已经非常详细,但我仍旧想提一点:.save()和.restore()。他们的作用是保存旋转之前的画布,然后旋转后恢复。有效地避免了和其他渲染冲突,十分关键,许多朋友没有顺利进行旋转,大多都是这个原因。 围绕某个点旋转
第二个类型是图像围绕空间的某个点进行旋转,这将变得比较复杂。可为什么要这样做呢?很多情况下,你需要把对象参照另一个对象旋转,单一的围绕中心旋转无法满足需求。而且后者会更常用,比如在做网页游戏中,经常会用到旋转。
2016322114156905.jpg (422×253)
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. ctx2.save();
  21. ctx2.translate(dx, dy);
  22. ctx2.rotate(angle);
  23. ctx2.translate(-dx, -dy);
  24. ctx2.drawImage(image2, dx - image2.width / 2, dy - image2.height / 2);
  25. ctx2.restore();
  26. }
  27. image2.src = 'smallimage.png';
  28. }
2016322114243019.gif (614×416) 代码简洁,作用是把一张图片按照一个点旋转了120度,这张图片更形象。 绘制魔性Logo
这是在度娘上看到了一个logo,巧妙运用了旋转变换,用一个很简单矩形,通过旋转变换,变成了一个很漂亮的logo。这logo是不是很有魔性?童鞋们动动脑,尝试实现一下它。下面,提供我实现它的代码。
JavaScript Code复制内容到剪贴板
  1. "zh">
  2. "UTF-8">
  3. 第一PHP社区 - PHP1.CN 国内最大的PHP中文社区 - 凯发国际娱乐,凯发国际娱乐下载-凯发国际官网
  4. "canvas-warp">
  5. "canvas">
  6. 你的浏览器居然不支持Canvas?!赶快换一个吧!!
  7. 《script》
  8. window.onload = function(){
  9. var canvas = document.getElementById("canvas");
  10. canvas.width = 800;
  11. canvas.height = 600;
  12. var context = canvas.getContext("2d");
  13. context.fillStyle = "#FFF";
  14. context.fillRect(0,0,800,600);
  15. for(var i=1; i<=10; i++){
  16. context.save();
  17. context.translate(400,300);
  18. context.rotate(36 * i * Math.PI / 180);
  19. context.fillStyle = "rgba(255,0,0,0.25)";
  20. context.fillRect(0, -200, 200, 200);
  21. context.restore();
  22. }
  23. };
  24. 《script》
运行结果:
2016322114315247.jpg (417×318)
是不是非常的酷?这个图形稍微分析一下发现还是蛮简单的,就是让一个正放形,以屏幕中点(即初始正方形左下角顶点)为圆心进行旋转。 艺术是不是很美妙?大家一定以及体会到了Canvas的奇妙,简简单单的几行代码就能实现无穷无尽的效果。只要脑洞够大,没有什么是不可以实现的。所以,扬起咱们的艺术家的旗帜,加快步伐,继续前进!
吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | 凯发国际娱乐 | 凯发国际娱乐下载 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有