利用HTML5 Canvas製作鍵盤及滑鼠動畫的實例分享_html5教學技巧

鍵盤控制小球移動

眾所周知，我們所看到的動畫其實就是一系列靜態畫面快速切換，讓肉眼因視覺殘像產生了「畫面在活動」的視覺效果。明白了這一點後，在canvas上繪製動畫效果就顯得比較簡單了。我們只需要將某個靜態圖形先清除，然後在另一個位置重新繪製，如此反复，讓靜態圖形按照一定的軌跡進行移動，就可以產生動畫效果了。

下面，我們在canvas上繪製一個實心小球，然後用鍵盤上的方向鍵控制小球的移動，從而產生動態效果。範例程式碼如下：

JavaScript Code複製內容到剪貼簿

1. html>   
2.   
3.   
4. "UTF-8">   
5.   
6.   
7. "moveBall(event)">   
8.   
9.   
10. "myCanvas" width="400px""400px" style="border: 1px solid red;">   
11. 您的瀏覽器不支援canvas標籤。  
12.   
13.   
14. <script><span class="string">"text/javascript"</script>>   
15. //取得Canvas物件(畫布)   
16. var canvas = document.getElementById("myCanvas"
17.   
18. //表示圓球的類別   
19. function Ball(x, y ,radius, speed){   
20.     this.x = x || 10;   //圓球的預設值     
21. this.y = y || 10;   //圓球的預設值     this
22. .radius = radius || 10; //圓球的半徑，預設為10 🎜>     this.speed = speed || 5;    
/圓球的速度，
23.             //上移動
  
    
25. this.moveUp = function
(>
26. function(         this.y -= this
27.         if(this.y radius){   
28.             //防止超出上方邊界                this.y = 
29.         }        };   
30.             //向右移動   
31.     
32. this.moveRight = 
33. function(>
function
34. (>(         this
.x  = 
35. this.         var maxX = canvas.width - 
this
36. 🎜>         if(this. 🎜>
this
37. . >             //防止超過右邊界   
            
38. this.x = maxX;           }  
39.     };   
40.        
41.     //向左移動   
42.     this.moveLeft = function(>function
43. (>(         this.x -= this
44.         if(this. 🎜>this. radius){   
            
45. //防止超出左邊界   
            
46. this.x =          }   
    };   
       
    
49. //向下移動
  
50.     this
.moveDown = 
51. function(>function(>(         this
52. .y  = this.         var maxY = canvas.height - 
53. this        if(this
.y >
54.             //防止超出下邊界                
this
55. .y = maxY;    .y = maxY;   
56.         }        };   
57. }   
58.   
59. //畫小球
60.   
61. function drawBall(ball){   
62.     if(typeof
63.  ctx >){            ctx.beginPath();            ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false >         ctx.fill();   
64.     }   
65. }  
66.   
67. //清空canvas畫布   
68. function clearCanvas(){   
69.     if(typeof ctx >){            ctx.clearRect(0, 0, 400, 300);         
70.     }   
71. }   
72.   
var
74.  ball = var Ball();    Ball();  
//簡單地偵測目前瀏覽器是否支援Canvas對象，以免在一些不支援html5的瀏覽器中提示語法錯誤
75.   
if
76. (canvas.getContext){          
//取得對應的CanvasRenderingContext2D物件(畫筆)
77.        
var
78.  ctx = canvas.getContext("2d";     drawBall(ball);   
}  
79.   
80. //onkeydown事件的回呼處理函數   
81. //依照使用者的按鍵控制小球的移動   
82. function moveBall(event){   
83.     switch(event.keyCode){   
84.         case 37:    //左方向鍵>             ball.moveLeft();   
85.             
break
86. ;            
case
87.  38:    //上方向鍵>             ball.moveUp();                
break
88. ;   
89.         case 39:    
//方向鍵約
90.             ball.moveRight();                break;   
91.         
case
92.  40:    //下方方向鍵             ball.moveDown();   
93.             break;            
default
94. :    
95.             return;   
96.     }                clearCanvas();  //先清空畫布
97.        drawBall(ball); //再繪製最新的小球
98.   
99. }   
100.      
101.     請使用支援html5的瀏覽器開啟以下網頁以查看實際效果(使用方向鍵進行移動)：
102. 使用canvas繪製可移動的小球。
103. 小丑笑臉
只需要了解很少的幾個API，然後使用需要的動畫參數，就能製作出這個有趣又能響應你的動作的Web動畫。
104. 第一步，畫五官 這個小丑沒有耳朵和眉毛，所以只剩下三官，但它的兩個眼睛我們要分別繪製，所以一共是四個部分。下面先看看程式碼。
105. 繪製左眼的代碼

JavaScript Code

複製內容到剪貼簿

1. var leftEye = new Kinetic.Line({   Kinetic.Line({  
2.          x: 150,   
3.        points: [0, 200, 50, 190, 100, 200, 50, 210],   
4.        tension: 0.5,   
5.        closed: true,   
6.        stroke: 'white',   
7.        strokeWidth: 10        
8.      });  

繪製右眼的代碼

JavaScript Code複製內容到剪貼簿

1. var rightEye = new Kinetic.Line({   Kinetic.Line({  
2.         x: sw - 250,   
3.         points: [0, 200, 50, 190, 100, 200, 50, 210],   
4.         tension: 0.5,   
5.         closed: true,   
6.         stroke: 'white',   
7.         strokeWidth: 10      
8.       });  

繪製鼻子的代碼

JavaScript Code複製內容到剪貼簿

1. var nose = new Kinetic.Line({  
 Kinetic.Line({  
2.  Kinetic.Line({  
3.         points: [240, 280, sw/2, 300, sw-240,280],   
4.         tension: 0.5,            closed: 
true
5. ,            stroke: 
'white'
6. ,   
7.         strokeWidth: 10   

      });  

繪製嘴巴的程式碼

JavaScript Code複製內容到剪貼簿

1. var mouth = new Kinetic.Line({ >         points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],  sh],  
2.         tension: 0.5,   
3.         closed: true
4. ,            stroke: 'red'
5. ,            strokeWidth: 10   
6.       });  
7. 你會不會覺得很失望，原來就這麼簡單幾行程式碼。沒錯，就是這麼簡單，相信你對自己能成為Web遊戲動畫程式設計師開始有信心了!

簡單講解一下上面的程式碼。 Kinetic就是我們使用的js工具包。在頁面的頭部，我們需要這樣引用它：

JavaScript Code

複製內容到剪貼簿

var

 mouth = 
1. new Kinetic.Line({ >         points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],  sh],           tension: 0.5,   
        closed: 
2. true
,   
        stroke: 
4. 'red',   
        strokeWidth: 10   
5.       });  
6. 其它幾個分別是幾個關鍵點，線條彈性，顏色，寬度等。這些都很容易理解。
第二步，讓圖片動起來
7. 這個動畫之所以能吸引人，是因為它能回應你的滑鼠動作，和使用者有互動，這是一個成功的動畫最關鍵的地方。如果你仔細觀察，這個小丑五官的變化只是形狀的變化，眼睛變大，嘴巴變大，鼻子變大，但特別的是這個變化不是瞬間變化，而是有過渡性的，這裡面有一些算法，這就是最讓人煩惱的地方。幸運的是，這演算法技術都非常的成熟，不需要我們來思考，在這些動畫引擎庫裡都把這些技術封裝成了非常簡單方便的介面。下面我們來看看如何讓動起來。
左眼的動畫

JavaScript Code

複製內容到剪貼簿

var leftEyeTween = new

 Kinetic.Tween({  >

1.         node: leftEye,            duration: 1,            easing: Kinetic.Easings.ElasticEaseOut,   
2.         y: -100,   
3.         points: [0, 200, 50, 150, 100, 200, 50, 200]  
      });  
5. 右眼的動畫
6. JavaScript Code
7. 複製內容到剪貼簿
   1. var rightEyeTween = new Kinetic.Tween({           node: rightEye,   
   2.         duration: 1,   
   3.         easing: Kinetic.Easings.ElasticEaseOut,   
   4.         y: -100,   
   5.         points: [0, 200, 50, 150, 100, 200, 50, 200]  
   6.       });  
   鼻子的動畫

JavaScript Code

複製內容到剪貼簿

var

1.  noseTween = new Kinetic.Tween({    Kinetic.Tween({            node: nose,   
2.         duration: 1,   
3.         easing: Kinetic.Easings.ElasticEaseOut,   
4.         y: -100,   
5.         points: [220, 280, sw/2, 200, sw-220,280]   
6.       });  
7. 嘴巴的動畫

JavaScript Code

複製內容到剪貼簿

var

 mouthTween = 
1. new Kinetic.Tween({           node: mouth,            duration: 1,   
2.         easing: Kinetic.Easings.ElasticEaseOut,   
3.         points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]  100, 250, sw/2, sh-20]  
      });  
5. 這些程式碼非常的簡單，而且變數名能自釋其意。稍微有點經驗的程式設計師想看懂這些程式碼應該不難。基本每段程式碼都是讓你提供一些點，指定動畫動作的衰退模式和持續時間。
完整的動畫程式碼
JavaScript Code

複製內容到剪貼簿

1. nbsp;HTML>   
2.   
3.      
4.     
5.       body {   
6.         margin: 0px;   
7.         padding: 0px;   
8.       }  
9.       #container {   
10.         background-color: black;   
11.       }   
12.        
13.      
14.      
15.     
    "container">
      
16.     <script><span class="string">"/js/lib/kinetic-v5.0.1.min.js"</script>>
    「延遲」>          
17. var sw = 578;   
      
18. var sh = 400;   
      
19. var stage = 新 新
 
20. (         容器： '容器'，  
21.         寬度：578，  
22.         高度：400   
23.       }）；  
24.       var 層 = 新 
25. 新
        y: -30    
      }）；  
  
28.       var leftEye = 新
29. 新
30.         x：150，  
31.         積分：[0, 200, 50, 190, 100, 200, 50, 210],  
32.         張力：0.5，           關閉： 
true
33. ，           中風: 
'白色'
34. ,   
35.         筆畫寬度：10        
36.       }）；  
37.          var rightEye = 
新
        x: sw - 250,   
        積分：[0, 200, 50, 190, 100, 200, 50, 210],  
        張力：0.5，  
41.         關閉： true
，  
42.         中風: '白色'
,   
        筆畫寬度：10      
44.       }）；   
45.   
46.       var 鼻子 = 新 
新
47.         積分：[240, 280, sw/2, 300, sw-240,280],  
48.         張力：0.5，  
49.         關閉： true，  
50.         中風: '白色',   
51.         筆畫寬度：10   
52.       }）；  
53.   
54.       var 嘴 = 新 
55. 新 
56. 新 
57.         分：[150, 340, sw/2, 380, sw - 150, 340, sw/2,10],          張力：0.5，  
        關閉： 
58. true，  
        中風： 
59. '紅色'
，  
        筆畫寬度：10   
      }）；  
  
      layer.add(leftEye)   
           .add(rightEye)   
           .add(鼻子)   
           .add(口);   
  
      stage.add(layer);   
69.   
      
70. //補間
  
71.          var
 leftEyeTween = 
72. 新
        節點：左眼，  
        持續時間： 1,   
        緩動：Kinetic.Easings.ElasticEaseOut，  
        y: -100,   
        積分：[0, 200, 50, 150, 100, 200, 50, 200]   
77.       }）；    
78.   
79.       var rightEyeTween =         節點：右眼，  
80.         持續時間： 1,   
81.         緩動：Kinetic.Easings.ElasticEaseOut，  
82.         y: -100,   
83.         積分：[0, 200, 50, 150, 100, 200, 50, 200]   
84.       }）；  
85.   
86.       var
87.  noseTween = 新        節點：鼻子，           持續時間： 1,   
88.         緩動：Kinetic.Easings.ElasticEaseOut，  
89.         y: -100,   
90.         積分：[220, 280, sw/2, 200, sw-220,280]   
91.       }）；    
92.   
93.       var
94.  mouthTween = 新
95.         節點：嘴，           持續時間： 1,            緩動：Kinetic.Easings.ElasticEaseOut，  
96.         分：[100, 250, sw/2, 250, sw - 100, 250, sw/2,sh-20]  100,  
      }）；    
  
      stage.getContainer().addEventListener(
99. '滑鼠懸停'
, 
100. 函數
, 
101. 函數 >
102.         leftEyeTween.play();            rightEyeTween.play();            noseTween.play();   
103.         mouthTween.play();   
104.       }）；  
105.   
106.       stage.getContainer().addEventListener(
'mouseout'
107. , 
函數
108.         leftEyeTween.reverse();   
109.         rightEyeTween.reverse();            noseTween.reverse();            mouthTween.reverse();   
110.       }）；  
111.   
112.     腳本>   
113.      
114.   

觀看示範