利用HTML5 Canvas制作鍵盤及鼠標(biāo)動畫的實例分享
WEB駭客 發(fā)布時間：2016-03-15 11:25:19 作者：佚名 
我要評論
我要評論這篇文章主要介紹了利用HTML5 Canvas制作鍵盤及鼠標(biāo)動畫的實例,文中分別分享了一個鍵盤控制的小球移動和鼠標(biāo)觸發(fā)的小丑小臉例子,需要的朋友可以參考下
鍵盤控制小球移動
眾所周知，我們所看到的動畫實際上就是一系列靜態(tài)畫面快速切換，從而讓肉眼因視覺殘像產(chǎn)生了「畫面在活動」的視覺效果。明白了這一點后，在canvas上繪制動畫效果就顯得比較簡單了。我們只需要將某個靜態(tài)圖形先清除，然后在另外一個位置重新繪制，如此反復(fù)，讓靜態(tài)圖形按照一定的軌跡進(jìn)行移動，就可以產(chǎn)生動畫效果了。
下面，我們在canvas上繪制一個實心小球，然后用鍵盤上的方向鍵控制小球的移動，從而產(chǎn)生動態(tài)效果。示例代碼如下：
JavaScript Code復(fù)制內(nèi)容到剪貼板
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>html5 canvas繪制可移動的小球入門示例</title>
- </head>
- <body onkeydown="moveBall(event)">
- <!-- 添加canvas標(biāo)簽，并加上紅色邊框以便于在頁面上查看 -->
- <canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
- 您的瀏覽器不支持canvas標(biāo)簽。
- </canvas>
- <script type="text/javascript">
- //獲取Canvas對象(畫布)
- var canvas = document.getElementById("myCanvas");
- //表示圓球的類
- function Ball(x, y ,radius, speed){
- this.x = x || 10; //圓球的x坐標(biāo)，默認(rèn)為10
- this.y = y || 10; //圓球的y坐標(biāo)，默認(rèn)為10
- this.radius = radius || 10; //圓球的半徑，默認(rèn)為10
- this.speed = speed || 5; //圓球的移動速度，默認(rèn)為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();
- //簡單地檢測當(dāng)前瀏覽器是否支持Canvas對象，以免在一些不支持html5的瀏覽器中提示語法錯誤
- if(canvas.getContext){
- //獲取對應(yīng)的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: //其他按鍵操作不響應(yīng)
- return;
- }
- clearCanvas(); //先清空畫布
- drawBall(ball); //再繪制最新的小球
- }
- </script>
- </body>
- </html>
請使用支持html5的瀏覽器打開以下網(wǎng)頁以查看實際效果(使用方向鍵進(jìn)行移動)：
使用canvas繪制可移動的小球。
小丑笑臉
只需要了解很少的幾個API，然后使用需要的動畫參數(shù)，就能制作出這個有趣又能響應(yīng)你的動作的Web動畫。
第一步，畫五官
這個小丑沒有耳朵和眉毛，所以只剩下三官，但它的兩個眼睛我們要分別繪制，所以一共是四個部分。下面先看看代碼。
繪制左眼的代碼
JavaScript Code復(fù)制內(nèi)容到剪貼板
- 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復(fù)制內(nèi)容到剪貼板
- 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復(fù)制內(nèi)容到剪貼板
- 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復(fù)制內(nèi)容到剪貼板
- 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復(fù)制內(nèi)容到剪貼板
- 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
- });
其它幾個分別是幾個關(guān)鍵點，線條彈性，顏色，寬度等。這些都很容易理解。
第二步，讓圖動起來
這個動畫之所以能吸引人，是因為它能響應(yīng)你的鼠標(biāo)動作，和用戶有互動，這是一個成功的動畫最關(guān)鍵的地方。如果你仔細(xì)觀察，這個小丑五官的變化只是形狀的變化，眼睛變大，嘴巴變大，鼻子變大，但特別的是這個變化不是瞬間變化，而是有過渡性的，這里面有一些算法，這就是最讓人發(fā)愁的地方。幸運的是，這算法技術(shù)都非常的成熟，不需要我們來思考，在這些動畫引擎庫里都把這些技術(shù)封裝成了非常簡單方便的接口。下面我們來看看如何讓動起來。
左眼的動畫
JavaScript Code復(fù)制內(nèi)容到剪貼板
- 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復(fù)制內(nèi)容到剪貼板
- 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復(fù)制內(nèi)容到剪貼板
- 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復(fù)制內(nèi)容到剪貼板
- 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)驗的程序員想看懂這些代碼應(yīng)該不難?；久慷未a都是讓你提供一些點，指定動畫動作的衰退模式和持續(xù)時間。
完整的動畫代碼
JavaScript Code復(fù)制內(nèi)容到剪貼板
- <!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>
相關(guān)文章
用HTML5 Canvas API中的clearRect()方法實現(xiàn)橡皮擦功能
這篇文章主要介紹了如何用HTML5 Canvas API中的clearRect()方法實現(xiàn)橡皮擦功能,文中擦除頁面某片區(qū)域使其顯示出背景圖的例子非常實用,需要的朋友可以參考下2016-03-15- 這篇文章主要介紹了HTML5 Canvas繪制文本及圖片的基礎(chǔ)教程, 通過Canvas我們就可以用JavaScript制作出程序代碼可以輕松控制的文本和圖片數(shù)據(jù),需要的朋友可以參考下2016-03-14
- 這篇文章主要介紹了通過HTML5 Canvas API繪制弧線和圓形的教程,用JavaScript可以自定義弧度以及設(shè)定起始終末點,使用JavaScript需要的朋友可以參考下2016-03-14
借助HTML5 Canvas來繪制三角形和矩形等多邊形的方法
這篇文章主要介紹了借助HTML5 Canvas來繪制三角形和矩形等多邊形的方法,通過文章開頭給的一些屬性及下面三角形和矩形的例子,同理便可得出其他多邊形的畫法,需要的朋友可以2016-03-14- 這篇文章主要介紹了使用HTML5 Canvas繪制直線或折線等線條的方法講解,通過Canvas API我們便可以輕松地使用JavaScript來操作圖形的位置坐標(biāo),需要的朋友可以參考下2016-03-14
HTML5 canvas實現(xiàn)移動端上傳頭像拖拽裁剪效果
這篇文章主要為大家詳細(xì)介紹了HTML5 canvas實現(xiàn)移動端上傳頭像拖拽裁剪效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-14html5 canvas移動瀏覽器上實現(xiàn)圖片壓縮上傳
這篇文章主要為大家詳細(xì)介紹了html5 canvas移動瀏覽器上實現(xiàn)圖片壓縮上傳的相關(guān)方法，提出了解決方法，分享了解決問題的思路，感興趣的小伙伴們可以參考一下2016-03-11html5 canvas實現(xiàn)跟隨鼠標(biāo)旋轉(zhuǎn)的箭頭
這篇文章主要為大家詳細(xì)介紹了html5 canvas實現(xiàn)跟隨鼠標(biāo)旋轉(zhuǎn)的箭頭，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-11- 這篇文章主要為大家詳細(xì)介紹了HTML5 canvas實現(xiàn)雪花飄落特效，效果實現(xiàn)引人入勝，很逼真的動畫效果，感興趣的小伙伴們可以參考一下2016-03-08
HTML5+Canvas實現(xiàn)日期圓形時鐘特效源碼
HTML5+Canvas實現(xiàn)日期圓形時鐘特效源碼是一款可以全屏漂浮，帶有日期星期顯示的時鐘代碼，外觀非常漂亮，需要的朋友前來下載源碼2016-03-07
