HTML5 Canvas draw method to create animation effect example

Author：Eve Cole Update Time：2025-05-08 10:48:02

Comment: First, prepare a picture with continuous frames, and then use HTML5 Canvas' draw method to draw different frames at different time intervals. This way, it looks like an animation is playing. The key technical points and example codes are as follows. Interested friends can refer to it. I hope it will be helpful to everyone.

HTML5 Canvas animation effect demonstration

Main ideas:

First, prepare a picture with continuous frames, and then use HTML5 Canvas' draw method to draw different frames at different time intervals, so that it looks like an animation is playing.

Key technical points:

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

Another parameter represents the interval time, in milliseconds. Code example:

setTimeout( update, 1000/30);

Canvas' API-drawImage() method requires all 9 parameters:

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

where offw and offh refer to the starting coordinate point of the source image, width and height represent the width and height of the source image, x2 and y2 tables

Shows the starting coordinate point of the source image on the target Canvas.

The effect of a 22-frame wild goose flying picture:

Source image:

Program code:

<!DOCTYPE html>

<html>

<head>

<title>Canvas Mouse Event Demo</title>

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>Play Animations</pre>

<div>

</div>

</body>

</html>

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