您现在的位置是：网站首页> 编程资料编程资料
实例讲解利用HTML5 Canvas API操作图形旋转的方法调用HTML5的Canvas API绘制图形的快速入门指南深入解析HTML5 Canvas控制图形矩阵变换的方法HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvahtml5的画布canvas——画出弧线、旋转的图形实例代码+效果图html5-Canvas可以在web中绘制各种图形H5最强接口之canvas实现动态图形功能
2021-08-31
1129人已围观
简介 这篇文章主要介绍了利用HTML5 Canvas API操作图形旋转的方法的实例讲解,包括图片自身的中心坐标位置旋转以及围绕某个点的旋转例子,需要的朋友可以参考下
作为web开发者，我一直在和HTML5 canvas元素打交道。渲染图片是一个大的分支，十分重要而且很常用，所以,今天的教程是关于画布图像展示以及如何旋转图像，说不定是你现在真正想要的好东西。
总的来说，canvas旋转有两种方式：中心旋转和参照点旋转。熟练应用旋转功能，对你的开发作品会有极大的帮助。
关于对象的中心旋转
第一个类型的旋转，我们要看看是对其中心旋转一个对象。实现使用画布元素，这是一个最简单的旋转类型。我们把一只大猩猩的图片作为素材进行试验。
基本的想法是,我们要把帆布按照一个中心点旋转,旋转画布,然后把画布回到原来的位置。如果你有一些经验关于图形引擎，那么这听起来应该很熟悉。代码大概就是这样：（点击看效果）
- function onload() {
- var canvas = document.getElementById('c1');
- var ctx1 = canvas.getContext('2d');
- var image1 = new Image();
- image1.onload = function() {
- // regular rotation about center
- var xpos = canvas.width/2;
- var ypos = canvas.height/2;
- ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
- ctx1.save();
- ctx1.translate(xpos, ypos);
- ctx1.rotate(47 * Math.PI / 180);//旋转47度
- ctx1.translate(-xpos, -ypos);
- ctx1.drawImage(image1, xpos - image1.width / 2, ypos - image1.height / 2);
- ctx1.restore();
- }
- image1.src = 'image.png';
- }
注释已经非常详细，但我仍旧想提一点：.save()和.restore()。他们的作用是保存旋转之前的画布，然后旋转后恢复。有效地避免了和其他渲染冲突，十分关键，许多朋友没有顺利进行旋转，大多都是这个原因。
围绕某个点旋转
第二个类型是图像围绕空间的某个点进行旋转，这将变得比较复杂。可为什么要这样做呢？很多情况下，你需要把对象参照另一个对象旋转，单一的围绕中心旋转无法满足需求。而且后者会更常用，比如在做网页游戏中，经常会用到旋转。
JavaScript Code复制内容到剪贴板
- function onload() {
- var canvas2 = document.getElementById('c2');
- var ctx2 = canvas2.getContext('2d');
- // regular rotation about point
- var image2 = new Image();
- image2.onload = function() {
- // regular rotation about a point
- var angle = 120 * Math.PI / 180; // angle of rotation in radians
- var rx = 300, ry = 200; // the rotation x and y
- var px = 300, py = 50; // the objects center x and y
- var radius = ry - py; // the difference in y positions or the radius
- var dx = rx + radius * Math.sin(angle); // the draw x
- var dy = ry - radius * Math.cos(angle); // the draw y
- ctx2.drawImage(image2, 300 - image2.width / 2, 50 - image2.height / 2);
- ctx2.beginPath();
- ctx2.arc(300,200,5,0,Math.PI*2,false);
- ctx2.closePath();
- ctx2.fillStyle = 'rgba(0,255,0,0.25)';
- ctx2.fill();
- ctx2.save();
- ctx2.translate(dx, dy);
- ctx2.rotate(angle);
- ctx2.translate(-dx, -dy);
- ctx2.drawImage(image2, dx - image2.width / 2, dy - image2.height / 2);
- ctx2.restore();
- }
- image2.src = 'smallimage.png';
- }
代码简洁，作用是把一张图片按照一个点旋转了120度，这张图片更形象。
绘制魔性Logo
这是在度娘上看到了一个logo，巧妙运用了旋转变换，用一个很简单矩形，通过旋转变换，变成了一个很漂亮的logo。这logo是不是很有魔性？童鞋们动动脑，尝试实现一下它。下面，提供我实现它的代码。
-
-
绘制魔性Logo -
- 你的浏览器居然不支持Canvas？！赶快换一个吧！！