Maison  >  Article  >  interface Web  >  Démonstration du code graphique de l'effet d'animation HTML5 Canvas

Démonstration du code graphique de l'effet d'animation HTML5 Canvas

黄舟
黄舟original
2017-03-22 14:51:563389parcourir

Démonstration de l'effet d'animation HTML5 Canvas

Idée principale :

Tout d'abord, préparez une image avec des images consécutives, puis utilisez la méthode de dessin de HTML5 Canvas pour dessiner différentes images à différents moments

intervalles, de sorte qu'il semble que l'animation soit en cours de lecture.

Points techniques clés :

La fonction JavaScript setTimeout() a deux paramètres. Le paramètre peut transmettre une méthode JavaScript,

et l'autre paramètre représente l'intervalle, en millisecondes. Exemple de code :

setTimeout(update, 1000/30);

Méthode Canvas API-drawImage(), les 9 doivent être spécifiées Paramètres :

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

où offw, offh fait référence au point de coordonnées de départ de l'image source, width, height représente la largeur et la hauteur de l'image source, x2, y2 représente

indiquant le point de départ de la source image sur le point de coordonnées cible du canevas.

L'effet obtenu par une photo de vol d'oie sauvage de 22 images :

Image source :


Code du programme :

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

J'ai découvert qu'il y avait un problème lors du téléchargement du format PNG transparent, j'ai donc téléchargé des images

opaques. Vous pouvez le remplacer par d'autres images. Après le remplacement

veuillez modifier le numéro de cadre maximum de 22 à votre numéro de cadre réel pour exécuter.

Ce qui précède est le contenu de la démonstration du code graphique de l'effet d'animation HTML5 Canvas. Pour plus de contenu connexe, veuillez faire attention au PHP. Site chinois (www.php .cn) !

Articles connexes :

Comment utiliser HTML5 Canvas pour créer des effets d'animation 3D

L'animation CSS3 implémente 5 effets d'animation préchargés

Analyse récapitulative des effets d'animation CSS3

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn