在canvas上实现元素图片镜像翻转动画效果的方法


Posted in HTML / CSS onMarch 20, 2018

一、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 时候的最终位置如下图示意:

在canvas上实现元素图片镜像翻转动画效果的方法

于是可以得到应当偏移的水平距离公式:

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这东西,玩的前端并不多,受众有限,不比流行技术。然,古语有云,不以善小而不为,希望以后有小伙伴搜索到相关问题的时候可以提供帮助。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3系列之3D制作方法案例
Aug 14 HTML / CSS
css3的@media属性实现页面响应式布局示例代码
Feb 10 HTML / CSS
css3实现画半圆弧线的示例代码
Nov 06 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
详解CSS3新增的背景属性
Dec 25 HTML / CSS
CSS3为背景图设置遮罩并解决遮罩样式继承问题
Jun 22 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
HTML5的结构和语义(4):语义性的内联元素
Oct 17 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
Sep 17 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
Apr 30 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 #HTML / CSS
浅谈基于Canvas的手绘风格图形库Rough.js
Mar 19 #HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 #HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 #HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 #HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 #HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 #HTML / CSS
You might like
php关于array_multisort多维数组排序的使用说明
2011/01/04 PHP
PHP中利用substr_replace将指定两位置之间的字符替换为*号
2011/01/27 PHP
destoon实现公司新闻详细页添加评论功能的方法
2014/07/15 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
PHP内核探索之解释器的执行过程
2015/12/22 PHP
JavaScript下通过的XMLHttpRequest发送请求的代码
2011/06/28 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
2013/05/27 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
js使用心得分享
2015/01/13 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
用js实现放大镜效果
2020/10/28 Javascript
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
详解使用python crontab设置linux定时任务
2016/12/08 Python
python实现石头剪刀布小游戏
2021/01/20 Python
django admin组件使用方法详解
2019/07/19 Python
解决Python对齐文本字符串问题
2019/08/28 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
Giglio俄罗斯奢侈品购物网:男士、女士、儿童高级时装
2018/07/27 全球购物
Viking Direct荷兰:购买办公用品
2019/06/20 全球购物
车间操作工岗位职责
2013/12/19 职场文书
一年级学生期末评语
2014/04/21 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
支部组织生活会方案
2014/06/10 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
图文详解nginx日志切割的实现
2022/01/18 Servers
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android
Java数据结构之堆(优先队列)
2022/05/20 Java/Android