Comments: First prepare an image with consecutive frames, and then draw different frames at different intervals using the draw method of HTML5 Canvas. This looks like an animation is playing, key Technical Points and instance Code are as follows. If you are interested, refer to the following. I hope to help you with HTML5 Canvas animation demonstration.
Main ideas:
First, you need to prepare an image with consecutive frames, and then draw different frames at different intervals using the draw method of HTML5 Canvas. This looks like an animation playing.
Key Technical points:
The JavaScript function setTimeout () has two parameters. The first one is that the parameter can pass a JavaScript method,
Another parameter represents the interval, in milliseconds. Sample Code:
SetTimeout (update, 1000/30 );
For the Canvas API-drawImage () method, you must specify all nine parameters:
Ctx. drawImage (myImage, offw, offh, width, height, x2, y2, width, height );
Here, offw and offh refer to the starting coordinate point of the source image. width and height indicate the width and height of the source image. Table x2 and y2
The starting coordinate point of the source image on the target Canvas.
The following figure shows the effect of a 22-frame Flying Geese:
Source image:
Program code:
The Code is as follows:
<! 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 = "../developer.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 <Pre> Play Animations </pre>
<Div id = "my_painter">
<Canvas id = "animation_canvas"> </canvas>
</Div>
</Body>
</Html>
I found that the upload transparent PNG format is a bit problematic, So I uploaded an opaque image. You can replace it with other images. After replacement, you can change the number of frames in bytes from 22 to the actual number of frames.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
