Demonstration des Grafikcodes für den HTML5-Canvas-Animationseffekt-H5-Tutorial-php.cn

Demonstration des Grafikcodes für den HTML5-Canvas-Animationseffekt

黄舟

Freigeben： 2017-03-22 14:51:56

Original

3402 Leute haben es durchsucht

Demonstration des HTML5-Canvas-Animationseffekts

Hauptidee:

Bereiten Sie zunächst ein Bild mit aufeinanderfolgenden Frames vor und verwenden Sie dann die Zeichenmethode von HTML5 Canvas, um verschiedene Frames in unterschiedlichen

-Intervallen zu zeichnen, sodass es aussieht, als würde die Animation abgespielt.

Wichtige technische Punkte:

Die JavaScript-Funktion setTimeout() hat zwei Parameter Der Parameter kann eine JavaScript-Methode übergeben,

und der andere Parameter stellt das Intervall in Millisekunden dar. Codebeispiel:

setTimeout(update, 1000/30);

Canvas API-drawImage() Methode, alle 9 müssen angegeben werden Parameter:

ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height);

wo offw, offh beziehen sich auf den Startkoordinatenpunkt des Quellbildes, Breite und Höhe repräsentieren die Breite und Höhe des Quellbildes, x2, y2 repräsentieren

und geben den Startpunkt der Quelle an Bild auf dem Ziel-Canvas-Koordinatenpunkt.

Der Effekt, der durch ein 22-Frame-Wildgans-Flugbild erzielt wird:

Quellbild:

Programmcode:

<!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

Nach dem Login kopieren

Ich habe festgestellt, dass beim Hochladen des transparenten PNG-Formats ein Problem aufgetreten ist, also habe ich

undurchsichtige Bilder hochgeladen. Sie können es durch andere Bilder ersetzen

Bitte ändern Sie die maximale Bildnummer von 22 auf Ihre tatsächliche Bildnummer, um ausgeführt zu werden.

Das Obige ist der Inhalt der HTML5-Canvas-Animationseffekt-Grafikcode-Demonstration. Für weitere verwandte Inhalte achten Sie bitte auf PHP Chinesische Website (www.php.cn)!

Verwandte Artikel:

So verwenden Sie HTML5 Canvas zum Erstellen von 3D-Animationseffekten

CSS3-Animation implementiert 5 vorab geladene Animationseffekte

Zusammenfassende Analyse von CSS3-Animationseffekten