首頁  >  文章  >  web前端  >  HTML5 Canvas動畫效果圖文程式碼演示

HTML5 Canvas動畫效果圖文程式碼演示

黄舟
黄舟原創
2017-03-22 14:51:563407瀏覽

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(&#39;img&#39;);
			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>
	<h1>HTML Canvas Animations Demo - By Gloomy Fish</h1>
	<pre class="brush:php;toolbar:false">Play Animations

發現上傳透明PNG格式有點問題,所以我上傳

不透明的圖片。可以用其它圖片替換,替換以後

請修改最大幀數從22到你的實際幀數即可運行。

 以上就是HTML5 Canvas動畫效果圖文程式碼簡報的內容,更多相關內容請關注PHP中文網(www.php .cn)!

相關文章:

如何用HTML5的Canvas製作3D動畫效果############CSS3動畫實作5種預載動畫效果## ##########css3動畫效果總結分析#######
陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn