溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關怎樣利用HTML5Canvas制作鍵盤及鼠標動畫，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
鍵盤控制小球移動
眾所周知，我們所看到的動畫實際上就是一系列靜態畫面快速切換，從而讓肉眼因視覺殘像產生了「畫面在活動」的視覺效果。明白了這一點后，在canvas上繪制動畫效果就顯得比較簡單了。我們只需要將某個靜態圖形先清除，然后在另外一個位置重新繪制，如此反復，讓靜態圖形按照一定的軌跡進行移動，就可以產生動畫效果了。
下面，我們在canvas上繪制一個實心小球，然后用鍵盤上的方向鍵控制小球的移動，從而產生動態效果。示例代碼如下：
JavaScript Code復制內容到剪貼板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5 canvas繪制可移動的小球入門示例</title>
</head>
<body onkeydown="moveBall(event)">
<!-- 添加canvas標簽，并加上紅色邊框以便于在頁面上查看 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的瀏覽器不支持canvas標簽。
</canvas>
<script type="text/javascript">
//獲取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事件的回調處理函數
//根據用戶的按鍵來控制小球的移動
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的瀏覽器打開以下網頁以查看實際效果(使用方向鍵進行移動)：
使用canvas繪制可移動的小球。
小丑笑臉
只需要了解很少的幾個API，然后使用需要的動畫參數，就能制作出這個有趣又能響應你的動作的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
});其它幾個分別是幾個關鍵點，線條彈性，顏色，寬度等。這些都很容易理解。
第二步，讓圖動起來
這個動畫之所以能吸引人，是因為它能響應你的鼠標動作，和用戶有互動，這是一個成功的動畫最關鍵的地方。如果你仔細觀察，這個小丑五官的變化只是形狀的變化，眼睛變大，嘴巴變大，鼻子變大，但特別的是這個變化不是瞬間變化，而是有過渡性的，這里面有一些算法，這就是最讓人發愁的地方。幸運的是，這算法技術都非常的成熟，不需要我們來思考，在這些動畫引擎庫里都把這些技術封裝成了非常簡單方便的接口。下面我們來看看如何讓動起來。
左眼的動畫
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]
});
這些代碼非常的簡單，而且變量名能自釋其意。稍微有點經驗的程序員想看懂這些代碼應該不難。基本每段代碼都是讓你提供一些點，指定動畫動作的衰退模式和持續時間。
完整的動畫代碼
JavaScript Code復制內容到剪貼板
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#container {
background-color: black;
}
</style>
</head>
<body>
<div id="container"></div>
<script src="/js/lib/kinetic-v5.0.1.min.js"></script>
<script defer="defer">
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>關于怎樣利用HTML5Canvas制作鍵盤及鼠標動畫就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
