這篇文章將為大家詳細講解有關怎樣利用HTML5Canvas制作鍵盤及鼠標動畫，文章內(nèi)容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
烏蘇網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、響應式網(wǎng)站設計等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)自2013年創(chuàng)立以來到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選創(chuàng)新互聯(lián)。
鍵盤控制小球移動
眾所周知，我們所看到的動畫實際上就是一系列靜態(tài)畫面快速切換，從而讓肉眼因視覺殘像產(chǎn)生了「畫面在活動」的視覺效果。明白了這一點后，在canvas上繪制動畫效果就顯得比較簡單了。我們只需要將某個靜態(tài)圖形先清除，然后在另外一個位置重新繪制，如此反復，讓靜態(tài)圖形按照一定的軌跡進行移動，就可以產(chǎn)生動畫效果了。
下面，我們在canvas上繪制一個實心小球，然后用鍵盤上的方向鍵控制小球的移動，從而產(chǎn)生動態(tài)效果。示例代碼如下：
JavaScript Code復制內(nèi)容到剪貼板
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.radius){
//防止超出上邊界
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.radius){
//防止超出左邊界
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事件的回調(diào)處理函數(shù)
//根據(jù)用戶的按鍵來控制小球的移動
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); //再繪制最新的小球
}
重慶分公司
重慶分公司