溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
HTML5 Canvas動畫效果演示
主要思想：
首先要準備一張有連續幀的圖片，然后利用HTML5 Canvas的draw方法在不同的時間
間隔繪制不同的幀，這樣看起來就像動畫在播放。
關鍵技術點：
JavaScript 函數setTimeout()有兩個參數，第一個是參數可以傳遞一個JavaScript方法，
另外一個參數代表間隔時間，單位為毫秒數。代碼示例：
setTimeout( update, 1000/30);
Canvas的API-drawImage()方法，需要指定全部9個參數：
ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height);
其中offw, offh是指源圖像的起始坐標點，width, height表示源圖像的寬與高，x2,y2表
示源圖像在目標Canvas上的起始坐標點。
一個22幀的大雁飛行圖片實現的效果：
源圖像：
程序代碼：
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="chrome=IE8"> <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> <title>Canvas Mouse Event Demo</title> <link href="default.css" rel="stylesheet" /> <script> var ctx = null; // global variable 2d context var started = false; var mText_canvas = null; var x = 0, y =0; var frame = 0; // 22 5*5 + 2 var imageReady = false; var myImage = null; var px = 300; var py = 300; var x2 = 300; var y2 = 0; window.onload = function() { var canvas = document.getElementById("animation_canvas"); console.log(canvas.parentNode.clientWidth); canvas.width = canvas.parentNode.clientWidth; canvas.height = canvas.parentNode.clientHeight; if (!canvas.getContext) { console.log("Canvas not supported. Please install a HTML5 compatible browser."); return; } // get 2D context of canvas and draw rectangel ctx = canvas.getContext("2d"); ctx.fillStyle="black"; ctx.fillRect(0, 0, canvas.width, canvas.height); myImage = document.createElement('img'); myImage.src = "../robin.png"; myImage.onload = loaded(); } function loaded() { imageReady = true; setTimeout( update, 1000/30); } function redraw() { ctx.clearRect(0, 0, 460, 460) ctx.fillStyle="black"; ctx.fillRect(0, 0, 460, 460); // find the index of frames in image var height = myImage.naturalHeight/5; var width = myImage.naturalWidth/5; var row = Math.floor(frame / 5); var col = frame - row * 5; var offw = col * width; var offh = row * height; // first robin px = px - 5; py = py - 5; if(px < -50) { px = 300; } if(py < -50) { py = 300; } //var rate = (frame+1) /22; //var rw = Math.floor(rate * width); //var rh = Math.floor(rate * height); ctx.drawImage(myImage, offw, offh, width, height, px, py, width, height); // second robin x2 = x2 - 5; y2 = y2 + 5; if(x2 < -50) { x2 = 300; y2 = 0; } ctx.drawImage(myImage, offw, offh, width, height, x2, y2, width, height); } function update() { redraw(); frame++; if (frame >= 22) frame = 0; setTimeout( update, 1000/30); } </script> </head> <body> <h2>HTML Canvas Animations Demo - By Gloomy Fish</h2> <pre>Play Animations</pre> <div id="my_painter"> <canvas id="animation_canvas"></canvas> </div> </body> </html>發現上傳透明PNG格式有點問題，所以我上傳 不透明的圖片。可以用其它圖片替換，替換以后
請修改最大幀數從22到你的實際幀數即可運行。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
