Canvas上实现元素图片镜像翻转动画教程

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog，发送下载链接帮助你免费下载！
本博客日IP超过1800，PV 2600 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog，之前的微信号好友位已满，备注：返现
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

越来越多的人在学习研究 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.js
var 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.com
var 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上实现元素图片镜像翻转动画的实现。

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号1：xmtxtt(5000人已满)，微信号2:codedq(5000人已满)，微信号3：xttblog(超2800)。备注：“xttblog”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » Canvas上实现元素图片镜像翻转动画教程