flash图片如何镜像翻转_在canvas上实现元素图片镜像翻转动画效果的方法
这篇文章主要介绍了在canvas上实现元素图片镜像翻转动画效果的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧!
一、Canvas图片水平镜像翻转效果预览
您可以狠狠的点击这里:canvas图片水平镜像翻转动画demo
demo页面中点击图片动画效果可见。
二、Canvas上实现图片镜像翻转的实现
CSS中要想实现元素的翻转效果,比较简单,例如我们希望某一张图片水平镜像翻转,只需要一行CSS就可以了:
img { transform: scaleX(-1); }
或者:
img { transform: scale(-1, 1); }
但是在canvas中,则要麻烦一些,麻烦的并不是无法翻转,而是坐标系的定位。
在Canvas中,如下代码可以实现资源的水平镜像翻转(假设 context 是Canvas的 2d 上下文):
context.scale(-1, 1);
或者使用 setTransform API直接矩阵变换:
context.setTransform(-1, 0, 0, 1, 0, 0);
然而,翻转虽然实现了,但是Canvas中元素定位就出了很大的问题。这是因为Canvas的坐标变换系和CSS不一样,因此,如果我们想实现居中翻转效果,需要在翻转之前将目标元素的中心点移动到变换轴上。
拿水平翻转距离,在 scale 之前先 translate 位移变换后的水平偏移,然后就能看到一直居中翻转的效果了。
语言苍白,拿图示意一下。
canvas默认的变化坐标系是左上角。
因此,如果水平 scale 为 1 , 0.5 , 0 , -0.5 , -1 时候的最终位置如下图示意:
于是可以得到应当偏移的水平距离公式:
distance = (canvas.width – image.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(form, to, duration, easing, callback);
动画JS如下:
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');
// 动画进行
Math.animation(1, -1, 600, 'Quad.easeInOut', function (value, isEnding) {
// 清除画布内容
context.clearRect(0, 0, canvas.width, canvas.height);
// 调整坐标
context.translate((canvas.width - canvas.width * value) / 2, 0);
// 调整缩放
context.scale(value, 1);
// 绘制此时图片
context.drawImage(eleImg, 0, 0);
// 坐标参考还原
context.setTransform(1, 0, 0, 1, 0, 0); });
三、结束语
又是一篇冷文,canvas这东西,玩的前端并不多,受众有限,不比流行技术。然,古语有云,不以善小而不为,希望以后有小伙伴搜索到相关问题的时候可以提供帮助。
以上就是本文的全部内容,希望对大家的学习有所帮助。
相关文章
flash图片如何镜像翻转_在canvas上实现元素图片镜像翻转动画效果的方法相关推荐
- 前端实现图片快速反转替换_在canvas上实现元素图片镜像翻转动画效果的方法
一.Canvas图片水平镜像翻转效果预览 demo页面中点击图片动画效果可见. 二.Canvas上实现图片镜像翻转的实现 CSS中要想实现元素的翻转效果,比较简单,例如我们希望某一张图片水平镜像翻转, ...
- 神奇的canvas——点与线绘制的绚丽动画效果
代码地址如下: http://www.demodashi.com/demo/11636.html 前言 之前在某网站上看到了一个canvas绘制的动画效果,虽然组成的元素很简单,只有点和线,但是视觉效 ...
- css3动画图片旋转绕轴,css3图片旋转如何实现?css3实现图片旋转动画效果的方法...
在网页中,我们经常可以看到一张图片在旋转,这样的图片旋转是怎么来实现的呢?本篇文章就来为你介绍一下关于css3实现图片旋转动画效果的方法. 实现css3中图片的旋转可以使用可以使用 -webkit-a ...
- 前端实现图片快速反转替换_HTML5开发之canvas实现元素图片镜像翻转动画效果的方法...
一.Canvas图片水平镜像翻转效果预览 您可以狠狠的点击这里:canvas图片水平镜像翻转动画demo demo页面中点击图片动画效果可见. 二.Canvas上实现图片镜像翻转的实现 CSS中要想实 ...
- 镜像翻转_宇称不守恒,是因为我们忽略了镜像宇宙?
制图:Patryk Hardziej 在某个不为人所知的区域,有一个与我们宇宙完全镜像的平行宇宙存在?为了验证这个看上去疯狂的假说,实验物理学家已经开始了行动.如能证实镜像宇宙的存在,暗物质谜题也可能 ...
- axios获取图片显示_vue中使用axios post上传头像/图片并实时显示到页面的方法
在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: 请上传图片 js代码: //实时显示该图片在页面 g ...
- C语言用句柄显示bmp图片,VC编程之VC MFC界面上显示BMP图片
本文主要向大家介绍了VC编程之VC MFC界面上显示BMP图片,通过具体的内容向大家展示,希望对大家学习VC编程有所帮助. 1.通过点击界面浏览按钮选择BMP图像文件. 点击浏览按钮打开文件对话框选择 ...
- python动态图片转字符画_使用python实现一个将图片转换成字符画的功能
使用python实现一个将图片转换成字符画的功能 发布时间:2020-11-05 16:01:25 来源:亿速云 阅读:97 使用python实现一个将图片转换成字符画的功能?针对这个问题,这篇文章详 ...
- 微信小程序在一张canvas上把正方形图片绘制成圆形
因为最近在做分享功能,需要用户的头像在微信小程序中,然后写下其他文字,如何在把正方形图片放到canvas,导成圆角.找了两个参考资料,分别是用.clip()和.clearRect()两种方法 微信小程 ...
最新文章
- python2安装_Linux 上安装 appium 的辛酸
- 二维模式(矩阵)匹配(Rabin-Karp算法推广到二维)[转]
- LINUX系统管理----GRUB笔记
- c语言简短的泡沫排序法编程,冒泡排序--简单(c语言)
- 2021国潮新消费产业洞察报告
- 外部操作获取iframe的东西
- 【250期门诊集锦】痛并快乐着的正则表达式
- Zabbix SNMP配置(学习笔记十九)
- OC 教程 极光推送
- 自制 arduino 音符频率对照表(音符在arduino里对应的值)
- oppoa57升级android版本,OPPO A57刷机教程 OPPO A57升级更新系统包
- InstallShield Crack,虚拟应用程序构建可靠
- 今天是没有python的一天(大物实验‘利用牛顿环测量曲率半径’报告和大物复习)
- Twitter新任80后印度裔CEO,为啥是他?
- ios中html怎么横屏,苹果xsmax页面怎么横屏
- OpenCV笔记:模板匹配 cv2.matchTemplate()、cv2.minMaxLoc() 与 绘制矩形 cv2.rectangle() 方法介绍
- Ceph运维告诉你分布式存储的那些“坑”
- 如何在地图上批量标注经纬坐标
- 已经清空了垃圾箱怎样找回误删的文件
- c语言循环左移程序,C语言中关于循环左移和循环右移
热门文章
- SQL中primary key的作用
- 泛微OA实施要点总结-立哥技术经验
- 2022-2028年中国水声通信行业市场调查研究及未来趋势预测报告
- 设有一头小母牛,从出生第四年起每年生一头小母牛,按此规律,第N年时有几头母牛?
- C语言学习第7天(错误处理、递归、内存管理)默认熟悉数据结构和java基础
- 物联网大学生创新创业项目
- c语言程序实习报告,c语言程序设计实习报告程序
- 求某门课号的成绩高于某个同学(例如李勇)任意一门成绩的学生学号和成绩
- Ubuntu12.04不能连接小米开发,adb devices不能看到设备
- java socket编程心跳_Java Socket编程心跳包创建实例解析