Simple animation production

concept:

 

In Canvas canvas animation is relatively simple, in fact, is a constant erase, redraw, erase, redraw process, follow these steps:

(1) prepared in advance for a good function spit, clearRect method canvas totally or partially erased by the function.

(2) using the method set interval setInterval animation.

setInterval method native methods in HTML, which accepts two parameters, the first parameter represents animation function is executed, the second parameter represents the time interval in milliseconds.

In more complex cases, we can also insert them in a clear and drawn animation Saving and restoring the current drawing state, become erased, save drawing state, draw, the process of restoring the state.

 

application:

 

var context;
var width,height;
var i ;
function draw(id){
var canvas=document.getElementById("id");
if(canvas==null)
return false;
scontext = canvas.getContext('2d');
width = canvas.width;
height = canvas.height;
i = 0;
setInterval(rotate,100);//十分之一秒
}
function rotate(){
context.clearRect(0,0,width,height);
context.fillStyle = 'red';
context.fillRect = (i,0,20,20);
i = i+20;
}