HTML5 Canvas draw方法製作動畫效果範例_html5教學技巧

HTML5 Canvas動畫效果示範
主要想法：
首先要準備一張有連續幀的圖片，然後利用HTML5 Canvas的draw方法在不同的時間間隔繪製不同的幀，這樣看起來就像動畫在播放。
關鍵技術點：
JavaScript 函數setTimeout()有兩個參數，第一個是參數可以傳遞一個JavaScript方法，
另外一個參數代表間隔時間，單位為毫秒數。程式碼範例：
setTimeout( update, 1000/30);
Canvas的API-drawImage()方法，需要指定全部9個參數：
ctx.drawImage(myImage, offw, offh, width,height.drawImage(myImage, offw, offh, width,height. , x2, y2, width, height);
其中offw, offh是指源影像的起始座標點，width, height表示來源影像的寬與高，x2,y2表
示源影像在目標Canvas上的起始座標點。
一個22幀的大雁飛行圖片實現的效果：
 
源圖像：
 
程序代碼：

複製程式碼

程式碼如下:

<script> <br />var ctx = null; // global variable 2d context <br />var started = false; <br />var mText_canvas = null; <br />var x = 0, y =0; <br />var frame = 0; // 22 5*5 2 <br />var imageReady = false; <br />var myImage = null; <br />var px = 300; <br />var py = 300; <br />var x2 = 300; <br />var y2 = 0; <br />windowonload = function.onload = function.onload = function.onload = function.onload = function.onload = function.onload = function.onload = function.onload = function.onload = function.onload = function.onload = function.onload = function.onload = function.onload = function.onload = function.onload = function.onload = function.onload = function.onload = function。 () { <br />var canvas = document.getElementById("animation_canvas"); <br />console.log(canvas.parentNode.clientWidth); <br />canvas.width = canvas.parentNode.clientWidth0. height = canvas.parentNode.clientHeight; <br />if (!canvas.getContext) { <br />console.log("Canvas not supported. Please install a HTML5 compatible browser."); <br />return; <br />// get 2D context of canvas and draw rectangel <br />ctx = canvas.getContext("2d"); <br />ctx.fillStyle="black"; <br />ctx.fillRect(0, 0, canvas, 0, canvas, 0, canvas, 0, canvas .width, canvas.height); <br />myImage = document.createElement('img'); <br />myImage.src = "../robin.png"; <br />myImage.onload = loaded(); <br />} <br />function loaded() { <br />imageReady = true; <br />setTimeout( update, 1000/30); <br />} <br />function redraw() { <>ctx. , 0, 460, 460) <br />ctx.fillStyle="black"; <br />ctx.fillRect(0, 0, 460, 460); <br />// find the index of frames in image <br />var height = myImage.naturalHeight/5; <br />var width = myImage.naturalWidth/5; <br />var row = Math.floor(frame / 5); <br />var col = frame - row * 5; <br /> var offw = col * width; <br />var offh = row * height; <br />// first robin <br />px = px - 5; <br />py = py - 5; <br />if(px < - 50) { <br />px = 300; <br />} <br />if(py < -50) { <br />py = 300; <br />} <br />//var rate = (frame 1) /22 ; <br />//var rw = Math.floor(rate * width); <br />//var rh = Math.floor(rate * height); <br />ctx.drawImage(myImage, offw, offh, width, height, px, py, width, height); <br />// second robin <br />x2 = x2 - 5; <br />y2 = y2 5; <br />if(x2 < -50) { <br />x2 = 300; <br />y2 = 0; <br />} <br />ctx.drawImage(myImage, offw, offh, width, height, x2, y2, width, height); <br />} <br />function. ) { <br />redraw(); <br />frame ; <br />if (frame >= 22) frame = 0; <br />setTimeout( update, 1000/30); <br />} <br /></script>

HTML Canvas Animations Demo - By Gloomy Fish

Play Animations

發現上傳透明PNG格式有點問題，所以我上傳不透明的圖片。可以用其它圖片替換，替換以後請修改最大幀數從22到你的實際幀數即可運行。