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 contextvar started = false;var mText_canvas = null;var x = 0, y =0;var frame = 0; // 22 5*5 + 2var 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 rectangelctx = 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 imagevar 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 robinpx = 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 robinx2 = 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><h1>HTML Canvas Animations Demo - By Gloomy Fish</h1><pre>Play Animations</pre><div id="my_painter"><canvas id="animation_canvas"></canvas></div></body></html>
發現上傳透明PNG格式有點問題，所以我上傳
不透明的圖片。可以用其它圖片替換，替換以後
請修改最大幀數從22到你的實際幀數即可運行。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
