H5では、ダイナミックなグラフィックス機能を実現するために、キャンバスの最も強力なインタフェース

setInterval(function(){
canCon.fillStyle="black";
//canCon.fill means to pick up a pen that draws solid shapes on this rice paper.
//style="black" means to dip a pen into a black ink
//all together it means to pick up a solid drawing pen and stick it with black ink
canCon.arc(233,233,66,0,Math.PI*2);
 // conceive a circle on rice paper (X position of the center of the circle, Y position, radius of the circle, from what position the circle starts and where it ends).
canCon.fill();//draw with the brush
},1000/60)

vary=100;//Give an initial center position, and then each time we draw, the y position of the center will move down one distance
setInterval(function(){
canCon.fillStyle="black";
//canCon.fill means pick up a pen that draws a solid shape on this rice paper.
//style="black" means to dip a pen into a black ink
//all together it means to pick up a solid drawing pen and stick it with black ink
canCon.arc(233,y++,66,0,Math.PI*2);
// conceive a circle on rice paper (X position of the center, Y position, radius of the circle, from what position the circle starts and where it ends).
canCon.fill();//draw with the brush
},1000/60)

vary=100;//give an initial center position, and then each time we draw, the y position of the center of the circle is moved down one distance
setInterval(function(){
canCon.clearRect(0, 0, 500, 500);//erase a rectangular area the top left corner of the rectangle and the width and height of the rectangle
canCon.fillStyle="black";
//canCon.fill means to pick up a pen that draws solid shapes on this rice paper
//style="black" means to dip a pen into a black ink
//all together it means to pick up a solid drawing pen and stick it with black ink
canCon.arc(233,y++,66,0,Math.PI*2);
// conceive a circle on rice paper (X position of the center, Y position, radius of the circle, from what position the circle starts and where it ends).
canCon.fill();//draw with the brush
},1000/60)

vary=100;//Give an initial circle center position, and each time we draw, the y position of the center moves down one distance
setInterval(function(){
canCon.beginPath();//Lift the pen up
canCon.clearRect(0, 0, 500, 500);//erase a rectangular area the coordinates of the upper left corner of the rectangle and the width and height of the rectangle
canCon.fillStyle="black";
//canCon.fill means to pick up a pen that draws solid shapes on this rice paper
//style="black" means to dip a pen into a black ink
//all together it means to pick up a solid drawing pen and stick it with black ink
canCon.arc(233,y++,66,0,Math.PI*2);
 // conceive a circle on rice paper (X position of the center, Y position, radius of the circle, from what position the circle starts and where it ends).
canCon.fill();//draw with the brush
},1000/60)