HTML5 Canvas draw method to create animation effect example_html5 tutorial skills

HTML5 Canvas animation effect demonstration
Main idea:
First prepare a picture with consecutive frames, and then use the draw method of HTML5 Canvas to draw different frames at different time intervals. Look like this It sounds like an animation is playing.
Key technical points:
The JavaScript function setTimeout() has two parameters. The first parameter can be passed to a JavaScript method.
The other parameter represents the interval in milliseconds. number. Code example:
setTimeout( update, 1000/30);
Canvas’ API-drawImage() method requires specifying all 9 parameters:
ctx.drawImage(myImage, offw, offh, width,height , x2, y2, width, height);
where offw, offh refers to the starting coordinate point of the source image, width, height represents the width and height of the source image, x2, y2 represents
represents the position of the source image in the target The starting coordinate point on the Canvas.
The effect achieved by a 22-frame wild goose flight picture:

Source image:

Program code:

Copy code

The code is as follows:

<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 />window.onload = function() { <br />var canvas = document.getElementById("animation_canvas"); <br />console.log(canvas.parentNode.clientWidth); <br />canvas.width = canvas.parentNode.clientWidth; <br />canvas.height = canvas.parentNode.clientHeight; <br />if (!canvas.getContext) { <br />console.log("Canvas not supported. Please install a HTML5 compatible browser." ); <br />return; <br />} <br />// get 2D context of canvas and draw rectangel <br />ctx = canvas.getContext("2d"); <br />ctx.fillStyle="black"; <br />ctx.fillRect(0, 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 () { <br />ctx.clearRect(0, 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 update() { <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

I found there was a problem uploading transparent PNG format, so I uploaded opaque images. You can replace it with other pictures. After replacement, please modify the maximum frame number from 22 to your actual frame number to run.