我正在尝试在香草 javascript 中创建下雨效果。下面是我尝试过的代码。我在y每个间隔更新坐标，但需要清除前一行，使其看起来像下降线效果。谢谢var canvas = document.getElementById("DemoCanvas");var ctx = canvas.getContext("2d");class Drop { constructor() { this.x = canvas.width / 2; this.y = 0; this.yspeed = 10; } fall() { this.y = this.y + this.yspeed; } show() { ctx.moveTo(this.x, this.y); ctx.lineTo(this.x, this.y + 10); ctx.stroke(); }}if (canvas.getContext) { let d = new Drop(); setInterval(() => { d.show(); d.fall(); }, 500);}<body> <canvas id="DemoCanvas" width="1400" height="1400"></canvas></body>
1 回答
一只甜甜圈
TA贡献1836条经验 获得超5个赞
只需调用ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);，同样，调用时stroke，您需要先调用ctx.beginPath()，所有这些：
var canvas = document.getElementById("DemoCanvas");
var ctx = canvas.getContext("2d");
class Drop{
constructor(){
this.x = canvas.width / 2;
this.y = 0;
this.yspeed = 10;
}
fall(){
this.y = this.y + this.yspeed;
}
show(){
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
ctx.beginPath()
ctx.moveTo(this.x, this.y);
ctx.lineTo(this.x, this.y+10);
ctx.stroke();
}
}
if (canvas.getContext) {
let d = new Drop();
setInterval(()=>{
d.show();
d.fall();
},500);
}
<body>
<canvas id="DemoCanvas" width="1400" height="1400"></canvas>
</body>
添加回答
举报
0/150
提交
取消