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

2021-02-23 12:05 jianzhan

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这物品,玩的前端开发其实不多,受众比较有限,不比时兴技术性。然,古语有云,不以善小而不为,期待之后有小伙子伴检索到有关难题的情况下能够出示协助。

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