在canvas上完成元素照片镜像系统旋转动漫实际效

1、Canvas照片水平镜像系统旋转实际效果预览

您能够狠狠的点一下这里：canvas照片水平镜像系统旋转动漫demo

demo网页页面中点一下照片动漫实际效果可见。

2、Canvas上完成照片镜像系统旋转的完成

CSS中要想完成元素的旋转实际效果，较为简易，比如大家期待某1张照片水平镜像系统旋转，只必须1行CSS便可以了：

img {
    transform: scaleX(⑴);
}

或：

img {
    transform: scale(⑴, 1);
}

可是在canvas中，则要不便1些，不便的其实不是没法旋转，而是座标系的精准定位。

在Canvas中，以下编码能够完成資源的水平镜像系统旋转（假定 context 是Canvas的 2d 左右文）：

context.scale(⑴, 1);

或应用 setTransform API立即引流矩阵转换：

context.setTransform(⑴, 0, 0, 1, 0, 0);

但是，旋转尽管完成了，可是Canvas中元素精准定位就出了很大的难题。这是由于Canvas的座标转换系和CSS不1样，因而，假如大家想完成垂直居中旋转实际效果，必须在旋转以前将总体目标元素的管理中心点挪动到转换轴上。

拿水平旋转间距，在 scale 以前先 translate 位移转换后的水平偏位，随后就可以看到1直垂直居中旋转的实际效果了。

語言苍白，拿图示意1下。

canvas默认设置的转变座标系是左上角。

因而，假如水平 scale 为 1 , 0.5 , 0 , -0.5 , ⑴ 情况下的最后部位以下图示意：

因而能够获得理应偏位的水平间距公式：

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, ⑴, 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);
});

3、完毕语

又是1篇冷文，canvas这物品，玩的前端开发其实不多，受众比较有限，不比时兴技术性。然，古语有云，不以善小而不为，期待之后有小伙子伴检索到有关难题的情况下能够出示协助。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。