通过鼠标移动绘制的矩形在鼠标移动时保持绘制，同时显示前面的矩形

Question

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

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当执行上面的代码时，会绘制一个矩形，每当我移动鼠标时，会绘制第二个，第三个和第四个等，但是先前绘制的矩形仍会出现！我希望他们离开。我希望它像动画一样。我希望它保持一个矩形，每当鼠标移动时移动，我不想看到前一个Y坐标的矩形。

This is what I mean

默认情况下，中间的矩形会被绘制。当我将鼠标移动到画布上时，其他弹出窗口，当我向下移动时它们会相互重叠（在照片的情况下）。我现在已经被困4小时了，如果这是一个妨碍它工作的菜鸟错误，我会感到很惊讶。现在是早上6点，所以去吧。无论如何，希望你们任何人都知道如何解决这个问题。

Answer 1

您必须使用clearRect()（ctx.clearRect(0,0,wW,wH)）清除画布并重绘如下所示的所有内容。

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;