利用HTML5 Canvas制作鍵盤及鼠標動畫的實例分享

2020-03-24 16:27:06

字體：大中小

來源：轉載

供稿：網友

鍵盤控制小球移動眾所周知，我們所看到的動畫實際上就是一系列靜態畫面快速切換，從而讓肉眼因視覺殘像產生了「畫面在活動」的視覺效果。明白了這一點后，在canvas上繪制動畫效果就顯得比較簡單了。我們只需要將某個靜態圖形先清除，然后在另外一個位置重新繪制，如此反復，讓靜態圖形按照一定的軌跡進行移動，就可以產生動畫效果了。下面，我們在canvas上繪制一個實心小球，然后用鍵盤上的方向鍵控制小球的移動，從而產生動態效果。示例代碼如下：JavaScript Code復制內容到剪貼板
metacharset= UTF-8 title html5canvas繪制可移動的小球入門示例 /title /head body /span> moveBall(event) !--添加canvas標簽，并加上紅色邊框以便于在頁面上查看-- canvasid= myCanvas width= 400px height= 300px >請使用支持html5的瀏覽器打開以下網頁以查看實際效果(使用方向鍵進行移動)：
使用canvas繪制可移動的小球。
小丑笑臉
只需要了解很少的幾個API，然后使用需要的動畫參數，就能制作出這個有趣又能響應你的動作的Web動畫。
第一步，畫五官這個小丑沒有耳朵和眉毛，所以只剩下三官，但它的兩個眼睛我們要分別繪制，所以一共是四個部分。下面先看看代碼。繪制左眼的代碼
JavaScript Code復制內容到剪貼板
varleftEye=newKinetic.Line({ x:150, points:[0,200,50,190,100,200,50,210], tension:0.5, closed:true, stroke:'white', strokeWidth:10 });
varrightEye=newKinetic.Line({ x:sw-250, points:[0,200,50,190,100,200,50,210], tension:0.5, closed:true, stroke:'white', strokeWidth:10 });
varnose=newKinetic.Line({ points:[240,280,sw/2,300,sw-240,280], tension:0.5, closed:true, stroke:'white', strokeWidth:10 });
varmouth=newKinetic.Line({ points:[150,340,sw/2,380,sw-150,340,sw/2,sh], tension:0.5, closed:true, stroke:'red', strokeWidth:10 });
你會不會覺得很失望，原來就這么簡單幾行代碼。沒錯，就是這么簡單，相信你對自己能成為一名Web游戲動畫程序員開始有信心了! 簡單講解一下上面的代碼。Kinetic就是我們使用的js工具包。在頁面的頭部，我們需要這樣引用它：JavaScript Code復制內容到剪貼板
varmouth=newKinetic.Line({ points:[150,340,sw/2,380,sw-150,340,sw/2,sh], tension:0.5, closed:true, stroke:'red', strokeWidth:10 });
其它幾個分別是幾個關鍵點，線條彈性，顏色，寬度等。這些都很容易理解。第二步，讓圖動起來這個動畫之所以能吸引人，是因為它能響應你的鼠標動作，和用戶有互動，這是一個成功的動畫最關鍵的地方。如果你仔細觀察，這個小丑五官的變化只是形狀的變化，眼睛變大，嘴巴變大，鼻子變大，但特別的是這個變化不是瞬間變化，而是有過渡性的，這里面有一些算法，這就是最讓人發愁的地方。幸運的是，這算法技術都非常的成熟，不需要我們來思考，在這些動畫引擎庫里都把這些技術封裝成了非常簡單方便的接口。下面我們來看看如何讓動起來。左眼的動畫
JavaScript Code復制內容到剪貼板
varleftEyeTween=newKinetic.Tween({ node:leftEye, duration:1, easing:Kinetic.Easings.ElasticEaseOut, y:-100, points:[0,200,50,150,100,200,50,200] });
varrightEyeTween=newKinetic.Tween({ node:rightEye, duration:1, easing:Kinetic.Easings.ElasticEaseOut, y:-100, points:[0,200,50,150,100,200,50,200] });
varnoseTween=newKinetic.Tween({ node:nose, duration:1, easing:Kinetic.Easings.ElasticEaseOut, y:-100, points:[220,280,sw/2,200,sw-220,280] });
varmouthTween=newKinetic.Tween({ node:mouth, duration:1, easing:Kinetic.Easings.ElasticEaseOut, points:[100,250,sw/2,250,sw-100,250,sw/2,sh-20] });
這些代碼非常的簡單，而且變量名能自釋其意。稍微有點經驗的程序員想看懂這些代碼應該不難。基本每段代碼都是讓你提供一些點，指定動畫動作的衰退模式和持續時間。完整的動畫代碼JavaScript Code復制內容到剪貼板
divid= container /div scriptsrc= /js/lib/kinetic-v5.0.1.min.js /script scriptdefer= defer varsw=578; varsh=400; varstage=newKinetic.Stage({ container:'container', width:578, height:400 }); varlayer=newKinetic.Layer({ y:-30 }); varleftEye=newKinetic.Line({ x:150, points:[0,200,50,190,100,200,50,210], tension:0.5, closed:true, stroke:'white', strokeWidth:10 }); varrightEye=newKinetic.Line({ x:sw-250, points:[0,200,50,190,100,200,50,210], tension:0.5, closed:true, stroke:'white', strokeWidth:10 }); varnose=newKinetic.Line({ points:[240,280,sw/2,300,sw-240,280], tension:0.5, closed:true, stroke:'white', strokeWidth:10 }); varmouth=newKinetic.Line({ points:[150,340,sw/2,380,sw-150,340,sw/2,sh], tension:0.5, closed:true, stroke:'red', strokeWidth:10 }); layer.add(leftEye) .add(rightEye) .add(nose) .add(mouth); stage.add(layer); //tweens varleftEyeTween=newKinetic.Tween({ node:leftEye, duration:1, easing:Kinetic.Easings.ElasticEaseOut, y:-100, points:[0,200,50,150,100,200,50,200] }); varrightEyeTween=newKinetic.Tween({ node:rightEye, duration:1, easing:Kinetic.Easings.ElasticEaseOut, y:-100, points:[0,200,50,150,100,200,50,200] }); varnoseTween=newKinetic.Tween({ node:nose, duration:1, easing:Kinetic.Easings.ElasticEaseOut, y:-100, points:[220,280,sw/2,200,sw-220,280] }); varmouthTween=newKinetic.Tween({ node:mouth, duration:1, easing:Kinetic.Easings.ElasticEaseOut, points:[100,250,sw/2,250,sw-100,250,sw/2,sh-20] }); stage.getContainer().addEventListener('mouseover',function(){ leftEyeTween.play(); rightEyeTween.play(); noseTween.play(); mouthTween.play(); }); stage.getContainer().addEventListener('mouseout',function(){ leftEyeTween.reverse(); rightEyeTween.reverse(); noseTween.reverse(); mouthTween.reverse(); }); /script /body /htmlhtml教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：HTML基礎：基本的HTML標簽

下一篇：HTML5 Canvas的事件處理介紹