Canvas图片水平镜像翻转效果预览
对于弄好那个动图，感觉有点棘手？没事，看这！我来讲讲怎么在Canvas画布上玩转图片翻转。别急，还有我们之前画的Canvas图片翻转的演示网页，你先去看看呗。单击图片就可立刻看到翻转效果！
Canvas上实现图片镜像翻转的实现
要让小玩具转起来，试试CSS,简单易懂！如果要逆时针转动，不要急，咱只需要换个个坐标轴就好！不过要是不想这么麻烦，还有个简单的方法，用Canvas就能轻松实现~
javascript //假设 context 是Canvas的2d上下文 context.scale(-1,1); 直接把你的照片往左边移点儿，再拖到正中间就OK！img { transform: scaleX(-1); }用setTransform这玩意儿，让我们也试着变脸，把矩阵换个样子~
img { transform: scale(-1, 1); }把画布的变型设为缩放，宽度不变，高度就降到零。
就这么画，把图片放到那里：0；0。
看着没，画板里的画面颠倒了些对不对？不用慌，其实就是画板的坐标系和CSS算法有点出入！要是你想恢复原状，那就得把物体中心调整到轴线上。举个例子，想要翻转成倾斜角度的话，可以试试用“移动变形”这招来保证物体始终处于中央。
居中翻转效果示意图
context.scale(-1, 1);Canvas的坐标可是从上方左边开始滴所以你的x轴变为1,0.5,0,-0.5和-1的话，画面就会变成下图这个样子咯～
（图示）
根据以上示意图，我们可以得到应当偏移的水平距离公式：
context.setTransform(-1, 0, 0, 1, 0, 0);距离就是（画布宽减去缩小图片后的宽）再除以2。
要处理镜像图片，咱们就直接来写个代码吧（这个代码是对应已经放大了画面到 scale 倍以后的情况）。
先算出距离，用画布宽度减去图像宽乘以缩放比例再除以2。
不用管距离，直接用上下键调位置就好。
context.scale(scale,1);
增加动画效果
试试Tween.js，这货让照片变得超有趣，就像变魔术一样。只要用上一个叫Math.animation()的方法，就能轻松搞定各种酷炫动画了，简单得不得了！
以下是一个简单的动画JS示例：
//使用Tween.js库创建一个简单动画
来，帮我搞个叫’stween’的东东，其实就是个TWEEN.Tween，起始位置设成0就完事儿了。
.to({x: 100}, 1000)
.onUpdate(function(){
//更新图片位置
清空画布，从0开始，画布的宽度和高度就是这样。
context.translate(this.x,0);
context.scale(1,1);
// 坐标参考调整 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);把图像按原尺寸的对称点画出来。
})
.start();
function animate(time){
碰到动画卡住了？赶紧用requestAnimationFrame()这个神奇的东东！轻松搞定！
TWEEN.update(time);
Math.animation(form, to, duration, easing, callback);}
animate();
结束语
Canvas画图确实有点儿难，但学会调整坐标和小妙招后，你的作品会变得更酷！告诉你个秘密，虽然平时不太需要用Canvas，但是关键时刻真的很好用。希望这篇小文章能帮到你们这些初学者，不要害怕失败，大胆试试看！相信自己，勇敢前进！
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); });。
评论0