Maison > Article > interface Web > Démonstration du code graphique de l'effet d'animation HTML5 Canvas
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('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 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