一、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);
或者使用setTransformAPI直接矩陣變換：
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如下：
varcanvas=document.querySelector('canvas');
varcontext=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這東西，玩的前端并不多，閱聽人有限，不比流行技術。希望以後有小夥伴搜尋到相關問題的時候可以提供幫助。
作者：扣丁學堂
連結：https://www.jianshu.com/p/998709334c4f