キャンバスをクリアせずに動いている（スジを残す）キャンバスの要素をクリアする方法

Question

他の要素のためキャンバスをクリアするのを止めるキャンバス上に円が描画されているランダムに生成されます

var circleX = 50; 
var circleY = 10; 
var moveCircX = 2; 
var moveCircY = 3; 
function createCirc(){ 
    ctx.fillStyle = 'red'; 
    ctx.beginPath(); 
    ctx.arc(circleX, circleY, 10, 0, Math.PI*2, true); 
    ctx.fill(); 

} 
function circMove(){ 
    circleY = (circleY + circMoveY) 
//then validation to stop it from being drawn of the canvas 

私がしようとしているのは、円を移動してキャンバスから前の描画された円をクリアすることです。だからサークルをクリアするための解決策があるのでしょうか、サークルを複製するスプライトを作成する方が簡単でしょうか？

Answer 1

背景が変化していないので、最も簡単な戦略は、サークルを最初に描画する前に背景をコピーしてからサークルを描画することです。移動するときは、保存したコピーから背景の一部を再描画してから、サークルを新しい場所に描画します。

有効な方法は、getImageDataとputImageDataです。初めてごcreateCircする前に

、（私のjavascriptのがさびているので、これは完璧ではないかもしれない間違いを訂正すること自由に感じ。）、単純に実行します。

imageData = ctx.getImageData(0,0, ctx.canvas.width, ctx.canvas.height) 

そして、あなたのcircMove機能であなたが移動して円を再描画する前に、あなたがしたい：

ctx.putImageData(imageData, circleX, circleY, circleX, circleY, 2*circle_radius, 2*circle_radius) 

（あなたはcircle_radiusを定義していませんが、私はあなたが同様の値を持っている必要があります確信している私はおそらくする半径2倍を使用しています。描画される画像のサイズ）