(537-631-707)
如何改变元素的状态?
一个圆的位置是由圆心的坐标决定的,那么我们在每次绘制canvas的时候就改变一次元素的位置即可
vary=100;//给一个初始的圆心位置,接下来每次绘制的时候圆心的y位置都往下移动一个距离
setInterval(function(){
canCon.fillStyle="black";
//canCon.fill的意思在这张宣纸上拿起一只画实心图形的笔,
//style="black"的意思就是蘸上一个黑色墨
//连起来看的话就是拿起一只画实心图形的笔并粘上有黑色的墨水
canCon.arc(233,y++,66,0,Math.PI*2);
//在宣纸上构思画一个圆(圆心的X位置,Y位置,圆的半径,从什么位置开始画圆,画到哪里结束);
canCon.fill();//下笔作画
},1000/60)
此时我们看到的不是一个运动的圆,更像是一个不断延伸的进度条。原因其实很简单,咱们在每次绘制一个新的图形的时候没有把原来的图形给擦出掉了,这样的画面就是n多图形叠加在一起的结果了。所以我们每次在绘制新的图形的时候就要把原来的给擦除掉,那么如何做到呢?
vary=100;//给一个初始的圆心位置,接下来每次绘制的时候圆心的y位置都往下移动一个距离
setInterval(function(){
canCon.clearRect(0,0,500,500);//擦除一个矩形区域 矩形的左上角坐标和矩形的宽高
canCon.fillStyle="black";
//canCon.fill的意思在这张宣纸上拿起一只画实心图形的笔,
//style="black"的意思就是蘸上一个黑色墨
//连起来看的话就是拿起一只画实心图形的笔并粘上有黑色的墨水
canCon.arc(233,y++,66,0,Math.PI*2);
//在宣纸上构思画一个圆(圆心的X位置,Y位置,圆的半径,从什么位置开始画圆,画到哪里结束);
canCon.fill();//下笔作画
},1000/60)但此时还是没有效果,那么到底是什么情况呢?我们可以回想一下我们小时候画画的场景,我们在擦除画纸上某一区域的时候是不是需要首先把画笔抬起来,这样的话我们才能用橡皮擦擦掉纸上的某些区域,所以我们在擦除canvas的某个区域之前先要把笔给抬起来才行。
vary=100;//给一个初始的圆心位置,接下来每次绘制的时候圆心的y位置都往下移动一个距离
setInterval(function(){
canCon.beginPath();//把笔抬起来
canCon.clearRect(0,0,500,500);//擦除一个矩形区域 矩形的左上角坐标和矩形的宽高
canCon.fillStyle="black";
//canCon.fill的意思在这张宣纸上拿起一只画实心图形的笔,









