キャンバス上でウィジェットを移動したいのですが、さまざまな理由からスプライトを使用したくありません。最新バージョンの Chrome を使用しています。ウィジェットを移動するには、ウィジェットを「描画解除」してから、別の場所に再描画します。「元に戻す」とは、同じ場所に同じ画像を描画することを意味しますが、背景と同じ色で描画するため、新しい画像を描画する前にウィジェットが完全に消えます。問題は、「描画を解除」すると、元の画像の痕跡がキャンバスに残ることです。ここで関連する質問を調べてみましたが、役立つものは何も見つかりませんでした。1 ピクセルの線を描画してアンチエイリアシングを行う問題を理解しているので、線幅を 2 (およびその他のさまざまな非整数値) に設定しましたが、役に立ちませんでした。誰にもアイデアはありますか?ここにフィドルのデモがあります、更新を行う関数は次のとおりです。
function draw(){
if(previousX !== null) {
ctx.lineWidth = 1;
ctx.fillStyle = '#ffffff';
ctx.strokeStyle = '#ffffff';
drawCircle(previousX, previousY, 20);
}
ctx.lineWidth = 1;
ctx.fillStyle = '#000000';
ctx.strokeStyle = '#000000';
drawCircle(x, y, 20);
console.log('drew circle (' + x + ', ' + y + ')');
previousX = x;
previousY = y;
}
PS私はグラフィックスの経験があまりない単なる愛好家なので、可能であれば答えを少し減らしてください.