怎么利用HTML5 Canvas制作鍵盤及鼠標動畫

這篇文章將為大家詳細講解有關怎么利用HTML5 Canvas制作鍵盤及鼠標動畫，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

　　鍵盤控制小球移動

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

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

　　JavaScript Code復制內容到剪貼板

　　html>

　　html5?canvas繪制可移動的小球入門示例

　　您的瀏覽器不支持canvas標簽。

　　//獲取Canvas對象(畫布)

　　var?canvas?=?document.getElementById("myCanvas");

　　//表示圓球的類

　　function?Ball(x,?y?,radius,?speed){

　　this.x?=?x?||?10;?//圓球的x坐標，默認為10

　　this.y?=?y?||?10;?//圓球的y坐標，默認為10

　　this.radius?=?radius?||?10;?//圓球的半徑，默認為10

　　this.speed?=?speed?||?5;//圓球的移動速度，默認為5

　　//向上移動

　　this.moveUp?=?function(){

　　this.y?-=?this.speed;

　　if(this.y?

　　//防止超出上邊界

　　this.y?=?this.radius;

　　}

　　};

　　//向右移動

　　this.moveRight?=?function(){

　　this.x?+=?this.speed;

　　var?maxX?=?canvas.width?-?this.radius;

　　if(this.x?>?maxX){

　　//防止超出右邊界

　　this.x?=?maxX;

　　}

　　};

　　//向左移動

　　this.moveLeft?=?function(){

　　this.x?-=?this.speed;

　　if(this.x?

　　//防止超出左邊界

　　this.x?=?this.radius;

　　}

　　};

　　//向下移動

　　this.moveDown?=?function(){

　　this.y?+=?this.speed;

　　var?maxY?=?canvas.height?-?this.radius;

　　if(this.y?>?maxY){

　　//防止超出下邊界

　　this.y?=?maxY;

　　}

　　};

　　}

　　//繪制小球

　　function?drawBall(ball){

　　if(typeof?ctx?!=?"undefined"){

　　ctx.beginPath();

　　ctx.arc(ball.x,?ball.y,?ball.radius,?0,?Math.PI?*?2,?false);

　　ctx.fill();

　　}

　　}

　　//清空canvas畫布

　　function?clearCanvas(){

　　if(typeof?ctx?!=?"undefined"){

　　ctx.clearRect(0,?0,?400,?300);

　　}

　　}

　　var?ball?=?new?Ball();

　　//簡單地檢測當前瀏覽器是否支持Canvas對象，以免在一些不支持html5的瀏覽器中提示語法錯誤

　　if(canvas.getContext){

　　//獲取對應的CanvasRenderingContext2D對象(畫筆)

　　var?ctx?=?canvas.getContext("2d");

　　drawBall(ball);

　　}

　　//onkeydown事件的回調處理函數

　　//根據用戶的按鍵來控制小球的移動

　　function?moveBall(event){

　　switch(event.keyCode){

　　case?37://左方向鍵

　　ball.moveLeft();

　　break;

　　case?38://上方向鍵

　　ball.moveUp();

　　break;

　　case?39://右方向鍵

　　ball.moveRight();

　　break;

　　case?40://下方向鍵

　　ball.moveDown();

　　break;

　　default://其他按鍵操作不響應

　　return;

　　}

　　clearCanvas();//先清空畫布

　　drawBall(ball);?//再繪制最新的小球

　　}

關于“怎么利用HTML5 Canvas制作鍵盤及鼠標動畫”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。