我是第一次使用类，想模拟雨滴。但是，以下代码仅绘制 1 个雨滴而不是 100 个。这可能是因为 clearRect(0,0,400,400(，因为当我删除该行时，会显示 100 个雨滴，但没有 clearRect，它只会创建多行。我将如何解决这个问题？提前谢谢你。
我的代码：
var a = document.getElementById("myCanvas");
var c = a.getContext("2d");
var objects = [];
class rainDrops {
constructor() {
this.x = Math.floor(Math.random() * 300) + 1;
this.y = 20;
}
show() {
c.clearRect(0, 0, 400, 400);
c.fillStyle = "blue";
c.beginPath();
c.rect(this.x, this.y, 5, 5);
c.fill();
c.closePath();
}
move() {
this.y++;
}
}
createRaindrops();
drawRaindrops();
function createRaindrops() {
for (var i = 0; i < 100; i++) {
objects[i] = new rainDrops();
}
}
function drawRaindrops() {
for (var j = 0; j < objects.length; j++) {
objects[j].show();
objects[j].move();
}
}
window.setInterval(drawRaindrops, 17);<canvas width="400" height="400" id="myCanvas"></canvas>将c.clearRect(0,0,400,400);移动到循环之前或之后的drawRaindrops()中，它应该可以工作。
<body>
<canvas width="400" height="400" id="myCanvas"></canvas>
<script>
var a=document.getElementById("myCanvas");
var c=a.getContext("2d");
var objects=[];
class rainDrops{
constructor(){
this.x=Math.floor(Math.random()*300)+1;
this.y=20;
}
show(){
c.fillStyle="blue";
c.beginPath();
c.rect(this.x,this.y,5,5);
c.fill();
c.closePath();
}
move(){
this.y++;
}
}
function createRaindrops(){
for(var i=0;i<100;i++){
objects[i]=new rainDrops();
}
}
function drawRaindrops(){
c.clearRect(0,0,400,400); // move it here
for(var j=0;j<objects.length;j++){
objects[j].show();
objects[j].move();
}
}
createRaindrops();
drawRaindrops();
window.setInterval(drawRaindrops, 17);
</script>
</body>