源码动态 源码评测 源码技巧 网站运营 网页制作 网站开发 安全相关 软件教程 IDC资讯 业界消息
高级搜索
关键字:Discuz!  Axure  团购系统
最新更新发布资源提建议收藏本站
当前位置:A5源码 > 资讯报道 > 网页制作 > html5 Canvas实现图片旋转的示例

html5 Canvas实现图片旋转的示例

作者:zy来源:未知浏览:时间:2018-01-16 11:59我要评论
众所周知canvas是位图,你可以在里面渲染你要的东西,不过你只能操作canvas的属性来进行编辑。就是说你并不能操作画进canvas的东西,例如我在canvas里添加一幅画,我现在想将那幅画移动10px,我们并不能直接操作那幅画,因为我们根本获取不到那幅画的任何信

众所周知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,再就是插入图片时将图片往左上角平移图片自身的一半。

这里分别有三个步骤:

1.移动canvas原点

2.旋转canvas

3.插入图片并移动

下面把这三个步骤分开看看(图片的宽高为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)

这样就大功告成了。

相关文章
网友对“html5 Canvas实现图片旋转的示例”的评论
资讯分类
本类热门资讯
  • 源码推荐
  • 软件推荐
关于我们联系我们发布资源广告服务合作伙伴网站地图版权声明与我们对话