Making animations in the canvas canvas is relatively simple, and is actually the process of changing coordinates, erasing, redrawing
1. Use the SetInterval method to set the time interval for the animation.
SetInterval (Code,millisec) SetInterval method in HTML, this method takes two parameters, the first function represents the function that performs the animation, and the second parameter is the interval, in milliseconds.
2. Functions for drawing
1) The effect of animation is achieved by changing the coordinates of x and Y.
2) In this function, first use the Clearrect method to erase the whole or local canvas.
Erase Image Clearrect Method:
Context.clearrect (X,y,width,height);
X refers to the horizontal axis of our starting point, y refers to the vertical axis of our starting point, width refers to the length of the brush, height is the height of the rub.
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "Utf-8"> <title>Canvas Drawing Animations</title> <Scriptsrc= "Js/canvas.js"type= "Text/javascript"CharSet= "Utf-8"></Script> </Head> <Bodyonload= "Draw (' canvas ')"> <CanvasID= "Canvas"width= "$"Height= "$"></Canvas> </Body></HTML>
varcontext;vari,j;varWidth,height;functionDraw (id) {varCanvas =document.getElementById (ID); Context= Canvas.getcontext (' 2d '); Width=Canvas.width; Height=Canvas.height; Context.fillstyle= ' Green '; Context.fillrect (0,0, Width,height); SetInterval (painting,100); I= 0; J= 0;}functionpainting () {//Example One: //Context.fillstyle = ' red '; //Context.fillrect (i,i,10,10); //Context.fillrect (i,200-j,10,10); //i++; //j + +; //Example Two:Context.fillstyle = ' White '; Context.clearrect (i,20,1,10); I++; }
Canvas to draw simple animations
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
