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

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>

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

Drawn rectangle through mouse-move keeps drawing itself whenever the mouse moves, while showing the previous rectangles

html

javascript

css

onmousemove

draw