javascript - 通过鼠标移动绘制的矩形会在鼠标移动时不断绘制自身，同时显示之前的矩形

Question

我必须说，我有一个非常奇怪的案例。首先，让我与您分享我正在使用的代码:

var CVSv2 = document.getElementById("CVS");


var ctx = CVSv2.getContext("2d");


var wH = window.innerHeight;
var wW = window.innerWidth;

CVS.height = wH;
CVS.width = wW;




DrawCanvas();

function DrawCanvas() {
  ctx.beginPath();
  ctx.fillStyle = "silver";
  ctx.fillRect(0, 0, wW, wH);
  ctx.fill();
}






function Paddle(xPositie, yPositie, pWidth, pHeight) {

  this.yPositie = yPositie;
  this.xPositie = xPositie;
  this.pWidth = pWidth;
  this.pHeight = pHeight;


  this.DrawPaddle = function() {
    ctx.beginPath();
    ctx.fillStyle = "black";
    ctx.fillRect(this.xPositie, this.yPositie, this.pWidth, this.pHeight);
    ctx.fill();
  }

}





var paddlePong = new Paddle(0, 200, 15, 100);



CVSv2.onmousemove = function(arg) {
  paddlePong.yPositie = arg.pageY;
}



Animate();




function Animate() {
  paddlePong.DrawPaddle();
  setTimeout(Animate, 50);
}

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

<canvas id="CVS">
</canvas>

当执行上面的代码时，绘制了一个矩形，每当我移动鼠标时，就会绘制第二个、第三个和第四个等，但是之前绘制的矩形仍然出现!我要他们走开。我希望它像动画一样。我希望它保持一个矩形，每次鼠标移动时它都会移动，并且我不想看到具有先前 Y 坐标的先前矩形。

This is what I mean

默认绘制位于中间的矩形。当我将鼠标移到 Canvas 上时，其他的会弹出，并且当我向下移动时它们会相互重叠(在照片的情况下)。我现在已经为此停留了 4 个小时，如果这是一个阻止它工作的菜鸟错误，我不会感到惊讶。现在是早上 6 点，所以去想想吧。不管怎样，希望你们中的任何一个都知道如何解决这个问题。

Answer 1

您必须使用 clearRect() (ctx.clearRect(0,0,wW,wH)) 来清除 Canvas 并重新绘制所有内容，如下所示。

var CVSv2 = document.getElementById("CVS");


var ctx = CVSv2.getContext("2d");


var wH = window.innerHeight;
var wW = window.innerWidth;

CVS.height = wH;
CVS.width = wW;

function DrawCanvas() {
  ctx.beginPath();
  ctx.fillStyle = "silver";
  ctx.fillRect(0, 0, wW, wH);
  ctx.fill();
}

function Paddle(xPositie, yPositie, pWidth, pHeight) {

  this.yPositie = yPositie;
  this.xPositie = xPositie;
  this.pWidth = pWidth;
  this.pHeight = pHeight;


  this.DrawPaddle = function() {
    ctx.beginPath();
    ctx.fillStyle = "black";
    ctx.fillRect(this.xPositie, this.yPositie, this.pWidth, this.pHeight);
    ctx.fill();
  }

}

var paddlePong = new Paddle(0, 200, 15, 100);

CVSv2.onmousemove = function(arg) {
  paddlePong.yPositie = arg.pageY;
}



Animate();




function Animate() {
  ctx.clearRect(0,0,wW,wH);
  DrawCanvas();
  paddlePong.DrawPaddle();
  setTimeout(Animate, 50);
}

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

<canvas id="CVS">
</canvas>