html5Canvas实现图⽚旋转的⽰例
众所周知canvas是位图，你可以在⾥⾯渲染你要的东西，不过你只能操作canvas的属性来进⾏编辑。就是说你并不能操作画进canvas的东西，例如我在canvas⾥添加⼀幅画，我现在想将那幅画移动10px，我们并不能直接操作那幅画，因为我们根本获取不到那幅画的任何信息。我们永远只能获取到的是canvas对象。
那问题来了，我要怎么旋转图⽚
其实canvas是提供了各种各样的接⼝去控制画布的，旋转有rotate()⽅法。
其实这⾥的旋转并不是真的把这个画布旋转了，例如我ate(Math.PI/2)旋转90°了。并不是说我们在页⾯上就会看到canvas旋转了90°。我们可以理解为其实canvas是有两个部分组成的，⼀个是⾁眼看得到的画布，⼀个是⽤于操作的虚拟画布，我们所有在虚拟画布上的动作都会映射到真实画布中去。
这样说可能很难理解，下⾯⽤图来解释⼀波。⾸先介绍⼀下rotate()⽅法先，它可以旋转画布，旋转点画布的原点，⽽画布的原点默认是左上⾓。
下⾯在给⼤家看⼀下旋转45°所呈现的效果：
在这⾥我们可以看到我刚刚所说的虚拟的画布旋转45°后再向虚拟的画布内插⼊图⽚，然后真实画布所呈现的就是虚拟画布和真实画布相交的部分了。这⾥可能不太好理解，⼤家仔细想想。
两张图的代码是这样的：
// 未旋转
var img = ElementById('img')
var canvas = ElementById('canvas')
var ctx = Context("2d")
ctx.drawImage(img, 0, 0)
// 逆时针旋转45°
var img = ElementById('img')
var canvas = ElementById('canvas')
var ctx = Context("2d")
ctx.drawImage(img, 0, 0)
看到这⾥我想⼤家基本知道rotate()的使⽤⽅法了。
下⾯就来说说怎么实现再图⽚中⼼旋转
再说之前向给⼤家了解⼀下canvas的另外两个⽅法的⽤法：
ctx.drawImage(img, x, y)：这个⽅法上⾯⽤过了，不过⾥⾯是有三个参数的，第⼀个是要插⼊的图⽚dom，后⾯两个x，y分别为插⼊图⽚时对img的位置进⾏修改。
从图可以看出，要想实现围绕图⽚中⼼旋转45°，就得把canvas的原点移动到这张图的中⼼，再旋转canvas，再就是插⼊图⽚时将图⽚往左上⾓平移图⽚⾃⾝的⼀半。
这⾥分别有三个步骤：
1. 移动canvas原点
2. 旋转canvas
3. 插⼊图⽚并移动
下⾯把这三个步骤分开看看（图⽚的宽⾼为400和300）
移动canvas原点
var img = ElementById('img')
var canvas = ElementById('canvas')
var ctx = Context("2d")
ctx.drawImage(img, 0, 0)
旋转canvas
var img = ElementById('img')
var canvas = ElementById('canvas') var ctx = Context("2d")
ctx.drawImage(img, 0, 0)
插⼊图⽚并移动
var img = ElementById('img')
var canvas = ElementById('canvas') var ctx = Context("2d")
ctx.drawImage(img, -200, -150)
这样就⼤功告成了
ps:⼤家再做完⼀系列动作后⼀定要将canvas的原点，旋转复原。不然再经过⼀系列操作后，canvas的设置会乱掉。每操作⼀次完成后都把设置恢复回原样就好了。
var img = ElementById('img')
var canvas = ElementById('canvas')
var ctx = Context("2d")
ctx.drawImage(img, -200, -150)
// 恢复设置（恢复的步骤要跟你修改的步骤向反）
html5开发示例
// 之后canvas的原点⼜回到左上⾓，旋转⾓度为0
// 其它操作...
还有⼀点要注意的，我刚刚⽰范的是图⽚相对canvas x轴y轴为0所⽰范的例⼦，如果不为0的情况下，只需在移动原点的时候anslate(200+x, 150+y)。这⾥的200和150是该图⽚的宽⾼的⼀半，x，y就是图⽚相对canvas的x，y
这篇⽂章讲的只是在图⽚中⼼旋转，之后我会写旋转搭配图⽚的缩放。有写的不好或错误的地⽅，望指出
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。