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

來源：易賢網(wǎng) 閱讀：1316 次日期：2016-07-07 13:39:17

溫馨提示：易賢網(wǎng)小編為您整理了“利用HTML5 Canvas制作鍵盤及鼠標動畫的實例分享”,方便廣大網(wǎng)友查閱！

這篇文章主要介紹了利用HTML5 Canvas制作鍵盤及鼠標動畫的實例,文中分別分享了一個鍵盤控制的小球移動和鼠標觸發(fā)的小丑小臉例子,需要的朋友可以參考下

鍵盤控制小球移動

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

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

JavaScript Code

<!DOCTYPE html>

<html>

<head>

<title>html5 canvas繪制可移動的小球入門示例</title>

</head>

您的瀏覽器不支持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); //再繪制最新的小球

}

</script>

</body>

</html>

請使用支持html5的瀏覽器打開以下網(wǎng)頁以查看實際效果(使用方向鍵進行移動)：

使用canvas繪制可移動的小球。

小丑笑臉

只需要了解很少的幾個API，然后使用需要的動畫參數(shù)，就能制作出這個有趣又能響應你的動作的Web動畫。

第一步，畫五官

這個小丑沒有耳朵和眉毛，所以只剩下三官，但它的兩個眼睛我們要分別繪制，所以一共是四個部分。下面先看看代碼。

繪制左眼的代碼

JavaScript Code

var leftEye = new Kinetic.Line({

x: 150,

points: [0, 200, 50, 190, 100, 200, 50, 210],

tension: 0.5,

closed: true,

stroke: 'white',

strokeWidth: 10

});

繪制右眼的代碼

JavaScript Code

var rightEye = new Kinetic.Line({

x: sw - 250,

points: [0, 200, 50, 190, 100, 200, 50, 210],

tension: 0.5,

closed: true,

stroke: 'white',

strokeWidth: 10

});

繪制鼻子的代碼

JavaScript Code

var nose = new Kinetic.Line({

points: [240, 280, sw/2, 300, sw-240,280],

tension: 0.5,

closed: true,

stroke: 'white',

strokeWidth: 10

});

繪制嘴巴的代碼

JavaScript Code

var mouth = new Kinetic.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

var mouth = new Kinetic.Line({

points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],

tension: 0.5,

closed: true,

stroke: 'red',

strokeWidth: 10

});

其它幾個分別是幾個關鍵點，線條彈性，顏色，寬度等。這些都很容易理解。

第二步，讓圖動起來

這個動畫之所以能吸引人，是因為它能響應你的鼠標動作，和用戶有互動，這是一個成功的動畫最關鍵的地方。如果你仔細觀察，這個小丑五官的變化只是形狀的變化，眼睛變大，嘴巴變大，鼻子變大，但特別的是這個變化不是瞬間變化，而是有過渡性的，這里面有一些算法，這就是最讓人發(fā)愁的地方。幸運的是，這算法技術都非常的成熟，不需要我們來思考，在這些動畫引擎庫里都把這些技術封裝成了非常簡單方便的接口。下面我們來看看如何讓動起來。

左眼的動畫

JavaScript Code

var leftEyeTween = new Kinetic.Tween({

node: leftEye,

duration: 1,

easing: Kinetic.Easings.ElasticEaseOut,

y: -100,

points: [0, 200, 50, 150, 100, 200, 50, 200]

});

右眼的動畫

JavaScript Code

var rightEyeTween = new Kinetic.Tween({

node: rightEye,

duration: 1,

easing: Kinetic.Easings.ElasticEaseOut,

y: -100,

points: [0, 200, 50, 150, 100, 200, 50, 200]

});

鼻子的動畫

JavaScript Code

var noseTween = new Kinetic.Tween({

node: nose,

duration: 1,

easing: Kinetic.Easings.ElasticEaseOut,

y: -100,

points: [220, 280, sw/2, 200, sw-220,280]

});

嘴巴的動畫

JavaScript Code

var mouthTween = new Kinetic.Tween({

node: mouth,

duration: 1,

easing: Kinetic.Easings.ElasticEaseOut,

points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]

});

這些代碼非常的簡單，而且變量名能自釋其意。稍微有點經(jīng)驗的程序員想看懂這些代碼應該不難。基本每段代碼都是讓你提供一些點，指定動畫動作的衰退模式和持續(xù)時間。

完整的動畫代碼

JavaScript Code

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 0px;

}

#container {

background-color: black;

}

</style>

</head>

<body>

var sw = 578;

var sh = 400;

var stage = new Kinetic.Stage({

container: 'container',

width: 578,

height: 400

});

var layer = new Kinetic.Layer({

y: -30

});

var leftEye = new Kinetic.Line({

x: 150,

points: [0, 200, 50, 190, 100, 200, 50, 210],

tension: 0.5,

closed: true,

stroke: 'white',

strokeWidth: 10

});

var rightEye = new Kinetic.Line({

x: sw - 250,

points: [0, 200, 50, 190, 100, 200, 50, 210],

tension: 0.5,

closed: true,

stroke: 'white',

strokeWidth: 10

});

var nose = new Kinetic.Line({

points: [240, 280, sw/2, 300, sw-240,280],

tension: 0.5,

closed: true,

stroke: 'white',

strokeWidth: 10

});

var mouth = new Kinetic.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

var leftEyeTween = new Kinetic.Tween({

node: leftEye,

duration: 1,

easing: Kinetic.Easings.ElasticEaseOut,

y: -100,

points: [0, 200, 50, 150, 100, 200, 50, 200]

});

var rightEyeTween = new Kinetic.Tween({

node: rightEye,

duration: 1,

easing: Kinetic.Easings.ElasticEaseOut,

y: -100,

points: [0, 200, 50, 150, 100, 200, 50, 200]

});

var noseTween = new Kinetic.Tween({

node: nose,

duration: 1,

easing: Kinetic.Easings.ElasticEaseOut,

y: -100,

points: [220, 280, sw/2, 200, sw-220,280]

});

var mouthTween = new Kinetic.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>

</html>

更多信息請查看網(wǎng)頁制作

上一篇：深入解析HTML5 Canvas控制圖形矩陣變換的方法

下一篇：html5 canvas移動瀏覽器上實現(xiàn)圖片壓縮上傳

易賢網(wǎng)手機網(wǎng)站地址：利用HTML5 Canvas制作鍵盤及鼠標動畫的實例分享

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復僅供參考，敬請考生以權威部門公布的正式信息和咨詢?yōu)闇剩?/div>

相關閱讀網(wǎng)頁制作

使用CSS制作立體導航欄10月30日

用純CSS3實現(xiàn)網(wǎng)頁中常見的小箭頭10月30日

有關HTML5中背景音樂的自動播放功能10月30日

HTML5、Select下拉框右邊加圖標的實現(xiàn)代碼(增進用戶體驗)10月30日

html5實現(xiàn)圖片轉(zhuǎn)圈的動畫效果——讓頁面動起來10月30日

html5清空畫布方法(三種)10月30日

HTML實現(xiàn)移動端固定懸浮半透明搜索框10月30日

HTML5 文件域+FileReader 分段讀取文件并上傳到服務器10月30日

Dreamweaver怎么設計彩色邊框的表格?10月30日

Dreamweaver怎么給個人簡歷添加照片并排版?10月30日

基于HTML5的WebGL實現(xiàn)json和echarts圖表展現(xiàn)在同一個界面10月30日

解決HTML5手機端頁面縮放的問題10月30日

利用純CSS實現(xiàn)居中的七大方法示例09月29日

CSS3中偽元素::before和::after的用法示例09月29日

詳解使用 CSS 的 font-size-adjust 屬性改善網(wǎng)頁排版09月29日

HTML5+CSS3 實現(xiàn)靈動的動畫 TAB 切換效果(DEMO)09月29日

css3 pointer-events 介紹詳解09月29日

CSS :focus-within的具體使用09月29日

你所不知道的 CSS 動畫技巧與細節(jié)09月29日

詳解CSS3選擇器:nth-child和:nth-of-type之間的差異09月29日

易賢網(wǎng)移動網(wǎng)站

2026國考·省考課程試聽報名

報班類型
姓名
手機號
驗證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合