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