HTML5 Canvas animation effect graphic code demonstration-H5 Tutorial-php.cn

HTML5 Canvas animation effect graphic code demonstration

黄舟

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

Original

3407 people have browsed it

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, so that it looks like the animation is playing.

Key technical points:

The JavaScript function setTimeout() has two parameters. The first one is that the parameter can Pass a JavaScript method,

The other parameter represents the interval, in milliseconds. Code example:

setTimeout(update, 1000/30);

Canvas API-drawImage() method, all 9 need to be specified Parameters:

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

where offw, offh refer to the starting coordinate point of the source image, width, height represent the width and height of the source image, x2, y2 represent the starting point of the source image on the target Canvas Coordinate points.

The effect achieved by a 22-frame wild goose flying picture:

## Source image:

Program code:

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

Copy after login

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.

The above is the content of the HTML5 Canvas animation effect graphic code demonstration. For more related content, please pay attention to the PHP Chinese website (www.php .cn)!

How to use HTML5 Canvas to create 3D animation effects

CSS3 animation to achieve 5 preload animation effects

Summary analysis of css3 animation effects