老师，我这么写是不是哪里错了，还是哪里有问题
来源：8-1 Canvas动画
慕桂英1352525
2021-09-11 17:41:15
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas离屏</title>
<meta name='viewport' content='width=device-width,'>
<style>
canvas{
transition:0.3s;
}
</style>
</head>
<body>
<canvas width="350px" height="250px" id="canvas">您的浏览器不支持canvas</canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var y=0,n=0;
context.fillStyle='black';
context.fillRect(0,0,350,250);
var s=[],a=0,x=0;
for(var n=0;n<canvas.width;n+=20){
var num=Math.random()*50;
s.push(num);
}
setInterval(function(){
context.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<canvas.width;i+=20){
context.beginPath();
context.fillStyle='red';
context.arc(i,s[a]+x,5,0,Math.PI*2,true);
context.fill()
a+=1;
};
x+=5;
},100)
</script>
</body>
</html>
1回答
-
好帮手慕星星
2021-09-11
同学你好，代码问题如下：
1、在定时器中清除矩形后，还需要再次绘制，否则不显示。将绘制的代码放在定时器中即可
2、定义a值为0，也需要放进定时器中，否则会一直增加。而我们想要的是绘制一次，索引a需要从0开始
参考修改：
祝学习愉快！0
相似问题
回答 4
回答 5