Sprite Animation clearRect Alternative?

Question

WAS? Ich versuche, Canvas und JavaScript zu verwenden, um eine Animation über einem Gitter anzuzeigen, das auch mit JavaScript gezeichnet werden muss. https://jsfiddle.net/cp1wqeeg/6/

PROBLEM! Um die vorherigen Bilder der Animation zu entfernen, habe ich clearRect() verwendet. Dies ist jedoch bricht mir das Gitter, das will ich nicht :(

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

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

FRAG Wie kann ich den vorherigen Rahmen meiner Animation entfernen, ohne das Gitter hinter meinem Sprit zu brechen

Answer 1

Die gängige Maßnahme hier ist, alles zu löschen und alles neu zu zeichnen
Aber es kann mühsam werden, wenn zB in Ihrem ca se, dein Hintergrund ändert sich nicht.

In diesem Fall ist eine einfache Lösung, Offscreen-Leinwände zu verwenden, die als Ebenen fungieren.

Zuerst zeichnen Sie Gitter in dieser Offscreen-Leinwand in der Initialisierungsphase.
Dann in Ihrer Schleife, zeichnen Sie nur Ihre Offscreen-Leinwand auf den Hauptkontext, mit der drawImage Methode.

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>