スプライトアニメーションclearRect代替？

Question

WHAT？ JavaScriptを使用して描画する必要があるグリッドの上にアニメーションを表示するには、キャンバスとJavaScriptを使用しようとしています。 https://jsfiddle.net/cp1wqeeg/6/

問題です。アニメーションの前のフレームを削除するには、clearRect（）を使用しました。しかし、これは私が望んでいない私のグリッドを壊す:(

JSFiddle：https://jsfiddle.net/cp1wqeeg/5

ctx.clearRect(50, 100, width, height);

QUESTIONがどのように私は私のスプライトの後ろにグリッドを壊すことなく、私のアニメーションの前のフレームを削除することができます？

Answer 1

ここでの一般的な操作は、すべてをクリアしてすべてを再描画することです。
しかし、たとえばcaあなたの背景は変わらない。

この場合、単純な解決策は、レイヤーとして機能するオフスクリーンキャンバスを使用することです。

最初に、このオフスクリーンキャンバスにグリッドをinitフェーズで描画します。
あなたのループでは、drawImageメソッドを使って、メインコンテキストにオフスクリーンキャンバスを描画するだけです。

var canvas = document.getElementById("myCanvas"), 
 
ctx = canvas.getContext("2d"), 
 

 
fov = 300, 
 
viewDist = 5, 
 
w = canvas.width/2, 
 
h = canvas.height/2, 
 
// here we create an offscreen canvas for the grid only 
 
gridCtx = canvas.cloneNode().getContext('2d'), 
 
angle = 0, 
 
i, p1, p2, 
 
grid = 5; 
 

 
function initGrid(){ 
 
/// create vertical lines on the off-screen canvas 
 
for(i = -grid; i <= grid; i++) { 
 
    p1 = rotateX(i, -grid); 
 
    p2 = rotateX(i, grid); 
 
    gridCtx.moveTo(p1[0], p1[1]); 
 
    gridCtx.lineTo(p2[0], p2[1]); 
 
    i++; 
 
} 
 
/// create horizontal lines 
 
for(i = -grid; i <= grid; i++) { 
 
    p1 = rotateX(-grid, i); 
 
    p2 = rotateX(grid, i); 
 
    gridCtx.moveTo(p1[0], p1[1]); 
 
    gridCtx.lineTo(p2[0], p2[1]); 
 
} 
 
gridCtx.stroke(); 
 
} 
 

 
function rotateX(x, y) { 
 
    var rd, ca, sa, ry, rz, f; 
 
    rd = angle * Math.PI/180; 
 
    ca = Math.cos(rd); 
 
    sa = Math.sin(rd); 
 

 
    ry = y * ca; 
 
    rz = y * sa; 
 

 
    f = fov/(viewDist + rz); 
 
    x = x * f + w; 
 
    y = ry * f + h; 
 

 
    return [x, y]; 
 
} \t 
 

 
initGrid(); 
 
var width = 200, 
 
height = 200, 
 
frames = 2, 
 
currentFrame = 0,  
 
\t 
 
imageSprite = new Image() 
 
imageSprite.src = 'https://s27.postimg.org/eg1cjz6cz/sprite.png'; 
 
\t 
 
var drawSprite = function(){ 
 
\t \t ctx.clearRect(0,0,canvas.width, canvas.height); 
 
    ctx.drawImage(gridCtx.canvas, 0,0); // now draw our grid canvas 
 
\t \t ctx.drawImage(imageSprite, 0, height * currentFrame, width, height, 50, 100, width, height); 
 
\t \t 
 
\t \t if (currentFrame == frames) { 
 
\t \t currentFrame = 0; 
 
\t \t } else { 
 
\t \t currentFrame++; 
 
\t \t } 
 
} 
 
setInterval(drawSprite, 500);

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #c3c3c3;"></canvas>