越來(lái)越多的人在學(xué)習(xí)研究?Canvas，然后使用?Canvas 制作各種各樣的動(dòng)畫。為了驗(yàn)證 Canvas 動(dòng)畫的可用性，我特意制作了一些 demo，分享給大家！

下面我們一起來(lái)進(jìn)入今天的學(xué)習(xí)內(nèi)容，Canvas圖片水平鏡像翻轉(zhuǎn)效果。

該效果的最終運(yùn)行截圖如下：

而相關(guān)的實(shí)現(xiàn)代碼非常簡(jiǎn)潔，總共不超過(guò)100行。

HTML 實(shí)現(xiàn)代碼如下：

<canvas width="256" height="192"></canvas>

相關(guān) JavaScript 代碼如下：

<script src="animation.js"></script><script>// 截取自https://github.com/zhangxinxu/Tween/blob/master/tween.jsvar Tween = {Quad: {easeInOut: function(t, b, c, d) {if ((t /= d / 2) < 1) return c / 2 * t * t + b;return -c / 2 * ((--t) * (t-2) - 1) + b;}}};// canvas 2d上下文獲取var canvas = document.querySelector('canvas');var context = canvas.getContext('2d');// 下面是一開(kāi)始圖片呈現(xiàn)的處理方法var strImgUrl = 'mm1.jpg';var eleImg = document.createElement('img');eleImg.origin = '';eleImg.onload = function () {context.drawImage(this, 0, 0);};eleImg.src = strImgUrl;// 水平翻轉(zhuǎn)動(dòng)畫 www.xttblog.comvar loop = 1;var flipX = function () {// 緩動(dòng)執(zhí)行API// Math.animation(form, to, duration, easing, callback);Math.animation(1 * loop, -1 * loop, 600, 'Quad.easeInOut', function (value, isEnding) {context.clearRect(0, 0, canvas.width, canvas.height);context.translate(canvas.width / 2 - canvas.width * value / 2, 0);context.scale(value, 1);context.drawImage(eleImg, 0, 0);// 坐標(biāo)參考還原context.setTransform(1, 0, 0, 1, 0, 0);if (isEnding) {loop = -1 * loop;}});};// 點(diǎn)擊畫布水平動(dòng)畫翻轉(zhuǎn)canvas.addEventListener('click', flipX);</script>

以上就是關(guān)于Canvas上實(shí)現(xiàn)元素圖片鏡像翻轉(zhuǎn)動(dòng)畫的實(shí)現(xiàn)。

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://jstctz.cn/21340.html