canvas动态绘制旋转图片,canvas能旋转画布内图片

　　一、Canvas图片水平镜像翻转效果预览

　　你可以点击这里：画布图片水平镜像翻转动画演示

　　点击演示页面中的图片动画效果。

　　二、Canvas上实现图片镜像翻转的实现

　　要实现CSS中元素的翻转效果，比较简单。比如我们想让某张图片水平翻转，只需要一行CSS:

　　img { transform:scaleX(-1)；}或者：

　　img { transform: scale(-1，1)；}但是在canvas中，就比较麻烦了。麻烦不在于不能翻转，而在于坐标系的定位。

　　在Canvas中，下面的代码可以实现资源的水平镜像翻转(假设上下文是Canvas的2d上下文):

　　context.scale(-1，1)；或者使用setTransform API直接进行矩阵变换：

　　context.setTransform(-1，0，0，1，0，0)；但是，虽然实现了翻转，但是画布中的元素定位存在很大的问题。这是因为Canvas的坐标变换系统和CSS的不同。因此，如果要实现中心翻转效果，需要在翻转之前将目标元素的中心点移动到变换轴上。

　　取水平翻转距离，平移平移后的水平偏移再缩放，然后就可以看到一直在中心翻转的效果了。

　　语言苍白。给我看看照片。

　　画布的默认变化坐标系是左上角。

　　因此，如果水平刻度为1，0.5，0，-0.5，-1，则最终位置如下图所示：

　　那么可以得到应该偏移的水平距离的公式：

　　距离=(canvas . widthimage . width * scale)/2；

　　这样，最终镜像绘制图片的关键代码就变成这样了(假设水平缩放尺寸为scale):

　　//坐标参考调整context . translate((canvas . width-image . width * scale)/2，0)；context.scale(scale，1)；context.drawImage(image，0，0)；//通过坐标引用还原context.settransform (1，0，0，1，0，0)；如何增加动画效果？

　　我们可以用Tween.js，https://github.com/zhangxinxu/tween.

　　里面有各种慢动作算法。借助于调用方便的Math.animation()方法，我们可以轻松达到想要的效果！

　　Math.animation(窗体、to、时长、缓动、回调)；JS动画如下：

　　var canvas=document . query selector( canvas )；var context=canvas . get context( 2d )；//动画数学。动画(1，-1，600，四边形。easeinout ，function (value，is ending){//Clear canvas content context . Clear rect(0，0，canvas.width，canvas . height)；//调整坐标context . translate((canvas . width-canvas . width * value)/2，0)；//调整缩放context.scale(值，1)；//此时绘制图片context.drawImage(eleImg，0，0)；//通过坐标引用还原context.settransform (1，0，0，1，0，0)；});三、结束语

　　又是一篇冷文，画布。前端游戏不多，受众也有限。并不比大众技术好。但是，老话说的好，我们不做好事，也不做小事。希望以后发现相关问题时，有朋友能帮到我们。

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。