越来越多的人在学习研究 Canvas，然后使用 Canvas 制作各种各样的动画。为了验证 Canvas 动画的可用性，我特意制作了一些 demo，分享给大家！

下面我们一起来进入今天的学习内容，Canvas图片水平镜像翻转效果。

该效果的最终运行截图如下：

而相关的实现代码非常简洁，总共不超过100行。

HTML 实现代码如下：

<canvas width="256" height="192"></canvas>

相关 JavaScript 代码如下：

<script src="animation.js"></script><script>// 截取自https://github.com/zhangxinxu/Tween/blob/master/tween.jsvar Tween = {Quad: {easeInOut: function(t, b, c, d) {if ((t /= d / 2) < 1) return c / 2 * t * t + b;return -c / 2 * ((--t) * (t-2) - 1) + b;}}};// canvas 2d上下文获取var canvas = document.querySelector('canvas');var context = canvas.getContext('2d');// 下面是一开始图片呈现的处理方法var strImgUrl = 'mm1.jpg';var eleImg = document.createElement('img');eleImg.origin = '';eleImg.onload = function () {context.drawImage(this, 0, 0);};eleImg.src = strImgUrl;// 水平翻转动画 www.xttblog.comvar loop = 1;var flipX = function () {// 缓动执行API// Math.animation(form, to, duration, easing, callback);Math.animation(1 * loop, -1 * loop, 600, 'Quad.easeInOut', function (value, isEnding) {context.clearRect(0, 0, canvas.width, canvas.height);context.translate(canvas.width / 2 - canvas.width * value / 2, 0);context.scale(value, 1);context.drawImage(eleImg, 0, 0);// 坐标参考还原context.setTransform(1, 0, 0, 1, 0, 0);if (isEnding) {loop = -1 * loop;}});};// 点击画布水平动画翻转canvas.addEventListener('click', flipX);</script>

以上就是关于Canvas上实现元素图片镜像翻转动画的实现。

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://dengtar.com/21340.html