社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > web前端 > H5教程 > 利用HTML5 Canvas製作鍵盤及滑鼠動畫的實例分享_html5教學技巧

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

WBOY
發布： 2016-05-16 15:45:44
原創
2334 人瀏覽過

鍵盤控制小球移動

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

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

JavaScript Code複製內容到剪貼簿
  1. html>   
  2.   
  3.   
  4. "UTF-8">   
  5. html5 canvas繪製可移動的小球入門範例   
  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. /圓球的速度，
  23.             //上移動
    24.   
    25.     
  25. this.moveUp = function
    26. (>
  26. function(         this.y -= this
  27.         if(this.y radius){   
  28.             //防止超出上方邊界                this.y = 
  29.         }        };   
  30.             //向右移動   
  31.     
  32. this.moveRight = 
  33. function(>
    34. function
  34. (>(         this
    35. .x  = 
  35. this.         var maxX = canvas.width - 
    36. this
  36. 🎜>         if(this. 🎜>
    37. this
  37. . >             //防止超過右邊界   
    38.             
  38. this.x = maxX;           }  
  39.     };   
  40.        
  41.     //向左移動   
  42.     this.moveLeft = function(>function
  43. (>(         this.x -= this
  44.         if(this. 🎜>this. radius){   
    45.             
  45. //防止超出左邊界   
    46.             
  46. this.x =          }   
    47.     };   
    48.        
    49.     
  49. //向下移動
    50.   
  50.     this
    51. .moveDown = 
  51. function(>function(>(         this
  52. .y  = this.         var maxY = canvas.height - 
  53. this        if(this
    54. .y >
  54.             //防止超出下邊界                
    55. 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.   
    74. var
  74.  ball = var Ball();    Ball();  
    75. //簡單地偵測目前瀏覽器是否支援Canvas對象，以免在一些不支援html5的瀏覽器中提示語法錯誤
  75.   
    76. if
  76. (canvas.getContext){          
    77. //取得對應的CanvasRenderingContext2D物件(畫筆)
  77.        
    78. var
  78.  ctx = canvas.getContext("2d";     drawBall(ball);   
    79. }  
  79.   
  80. //onkeydown事件的回呼處理函數   
  81. //依照使用者的按鍵控制小球的移動   
  82. function moveBall(event){   
  83.     switch(event.keyCode){   
  84.         case 37:    //左方向鍵>             ball.moveLeft();   
  85.             
    86. break
  86. ;            
    87. case
  87.  38:    //上方向鍵>             ball.moveUp();                
    88. break
  88. ;   
  89.         case 39:    
    90. //方向鍵約
  90.             ball.moveRight();                break;   
  91.         
    92. case
  92.  40:    //下方方向鍵             ball.moveDown();   
  93.             break;            
    94. default
  94. :    
  95.             return;   
  96.     }                clearCanvas();  //先清空畫布
  97.        drawBall(ball); //再繪製最新的小球
  98.   
  99. }   
  100.      
  101.     請使用支援html5的瀏覽器開啟以下網頁以查看實際效果(使用方向鍵進行移動)：
  102. 使用canvas繪製可移動的小球。
  103. 小丑笑臉
    104. 只需要了解很少的幾個API，然後使用需要的動畫參數，就能製作出這個有趣又能響應你的動作的Web動畫。
  104. 第一步，畫五官 這個小丑沒有耳朵和眉毛，所以只剩下三官，但它的兩個眼睛我們要分別繪製，所以一共是四個部分。下面先看看程式碼。
  105. 繪製左眼的代碼
JavaScript Code

複製內容到剪貼簿

繪製右眼的代碼


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

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]  
    4.       });  
  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.       });  
      8. 鼻子的動畫


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]  
    4.       });  
  5. 這些程式碼非常的簡單，而且變數名能自釋其意。稍微有點經驗的程式設計師想看懂這些程式碼應該不難。基本每段程式碼都是讓你提供一些點，指定動畫動作的衰退模式和持續時間。
    6. 完整的動畫程式碼
    7. JavaScript Code
複製內容到剪貼簿

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

相關標籤：
canvas html5 動畫
來源：php.cn
上一篇：HTML5 3D衣服搖擺動畫特效_html5教學技巧 下一篇：探索HTML5本機儲存功能運用技巧
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...
來自於 2024-04-06 15:33:12
0
1
433
PDF檔案能夠運行HTML5和Javascript嗎？ 我有一個愚蠢的想法，想嘗試製作一個在任何計算機上都不會被阻止的程序，因為它將嵌入在PDF中（我聽說Javascript可以在PDF中運行）。它將在PDF檔案中運行HTML5和Jav...
來自於 2024-04-05 12:57:00
0
1
456
HTML5中的enctype和formenctype有什麼差別？ 我只是想知道HTMLLivingStandard（又稱新的HTML5規範）中的屬性enctype和formenctype之間有什麼區別？我一直在閱讀《開發人員的HTML標準》，但似...
來自於 2024-04-02 11:47:56
0
1
275
使頁面適合行動裝置嗎？ 我有很多網頁和一些網站。問題是，我是一個初學者。我使用基本的html5和css3，但我不知道如何使它們放大、縮小並且適合行動裝置。例如，這是我的頁面之一和我的網站之一，您可以在其中...
來自於 2024-04-01 20:42:38
0
1
259
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板