マウス移動による描かれた矩形は、マウスが動くたびに描画自体を保持し、前の四角形を表示しながら

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>

上記のコードが実行される

は、1つの矩形が描画されますが、私は、マウス、第二、動くたび第3、第4などが描画されますが、以前描かれた矩形は引き続き表示されます。私は彼らが去ることを望む。私はそれをアニメーションのようにしたい。マウスが動くたびに動く1つの矩形のままにしておきたい、そして前のY座標で前の矩形を見たくない。

This is what I mean

やや真ん中の長方形は、デフォルトで描かれます。私がキャンバスの上にマウスを動かすと、他のものがポップアップし、私が下に移動すると（写真のシナリオの場合）、それらは互いに重なります。私はこれで4時間これに固執しています。それが動作しないようなノーオブのミスなら、私は驚かないでしょう。それは午前6時です。とにかく、あなたの誰もがその問題を解決する方法を知っていればうまくいけば。

Answer 1

キャンバスをクリアして下に示すようにすべてを再描画するには、clearRect()（ctx.clearRect(0,0,wW,wH)）を使用する必要があります。

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>