html5 Canvas实现图片旋转的示例

网页制作 2024/11/17 佚名

3 1 2

众所周知canvas是位图，你可以在里面渲染你要的东西，不过你只能操作canvas的属性来进行编辑。就是说你并不能操作画进canvas的东西，例如我在canvas里添加一幅画，我现在想将那幅画移动10px，我们并不能直接操作那幅画，因为我们根本获取不到那幅画的任何信息。我们永远只能获取到的是canvas对象。

那问题来了，我要怎么旋转图片

其实canvas是提供了各种各样的接口去控制画布的，旋转有rotate()方法。

其实这里的旋转并不是真的把这个画布旋转了，例如我ctx.rotate(Math.PI/2)旋转90°了。并不是说我们在页面上就会看到canvas旋转了90°。我们可以理解为其实canvas是有两个部分组成的，一个是肉眼看得到的画布，一个是用于操作的虚拟画布，我们所有在虚拟画布上的动作都会映射到真实画布中去。

这样说可能很难理解，下面用图来解释一波。首先介绍一下rotate()方法先，它可以旋转画布，旋转点画布的原点，而画布的原点默认是左上角。

下面在给大家看一下旋转45°所呈现的效果：

在这里我们可以看到我刚刚所说的虚拟的画布旋转45°后再向虚拟的画布内插入图片，然后真实画布所呈现的就是虚拟画布和真实画布相交的部分了。这里可能不太好理解，大家仔细想想。

两张图的代码是这样的：

// 未旋转
var img = document.getElementById('img')
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext("2d")
ctx.drawImage(img, 0, 0)
// 逆时针旋转45°
var img = document.getElementById('img')
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext("2d")
ctx.rotate(-Math.PI / 4);
ctx.drawImage(img, 0, 0)

看到这里我想大家基本知道rotate()的使用方法了。

下面就来说说怎么实现再图片中心旋转

再说之前向给大家了解一下canvas的另外两个方法的用法：

ctx.translate(x, y): 这个方法是可以移动画布原点的方法，参数分别是x，y；

ctx.drawImage(img, x, y)：这个方法上面用过了，不过里面是有三个参数的，第一个是要插入的图片dom，后面两个x，y分别为插入图片时对img的位置进行修改。

从图可以看出，要想实现围绕图片中心旋转45°，就得把canvas的原点移动到这张图的中心，再旋转canvas，再就是插入图片时将图片往左上角平移图片自身的一半。

这里分别有三个步骤：

移动canvas原点
旋转canvas
插入图片并移动

下面把这三个步骤分开看看（图片的宽高为400和300）

移动canvas原点

var img = document.getElementById('img')
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext("2d")
ctx.translate(200, 150)
ctx.drawImage(img, 0, 0)

旋转canvas

var img = document.getElementById('img')
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext("2d")
ctx.translate(200, 150)
ctx.rotate(-Math.PI / 4)
ctx.drawImage(img, 0, 0)

插入图片并移动

var img = document.getElementById('img')
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext("2d")
ctx.translate(200, 150)
ctx.rotate(-Math.PI / 4)
ctx.drawImage(img, -200, -150)

这样就大功告成了

ps:大家再做完一系列动作后一定要将canvas的原点，旋转复原。不然再经过一系列操作后，canvas的设置会乱掉。每操作一次完成后都把设置恢复回原样就好了。

var img = document.getElementById('img')
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext("2d")
ctx.translate(200, 150)         // 1
ctx.rotate(-Math.PI / 4)        // 2
ctx.drawImage(img, -200, -150)
// 恢复设置（恢复的步骤要跟你修改的步骤向反）
ctx.rotate(Math.PI / 4)         // 1
ctx.translate(-200, -150)       // 2
// 之后canvas的原点又回到左上角，旋转角度为0
// 其它操作...

还有一点要注意的，我刚刚示范的是图片相对canvas x轴y轴为0所示范的例子，如果不为0的情况下，只需在移动原点的时候ctx.translate(200+x, 150+y)。这里的200和150是该图片的宽高的一半，x，y就是图片相对canvas的x，y

这篇文章讲的只是在图片中心旋转，之后我会写旋转搭配图片的缩放。有写的不好或错误的地方，望指出

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

html图片旋转,html5,图片旋转,html,实现图片旋转

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“html5 Canvas实现图片旋转的示例”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月17日

html5 Canvas实现图片旋转的示例

浅谈html5 video 移动端填坑记

详解html5页面 rem 布局适配方法

评论“html5 Canvas实现图片旋转的示例”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接