Sprite Animation clearRect替代品？

Question

什么？ 我正在尝试使用 canvas 和 JavaScript 在网格顶部显示动画，该动画也必须使用 JavaScript。 https://jsfiddle.net/cp1wqeeg/6/

问题！ 为了删除动画的前几帧，我使用了 clearRect()。然而，这打破了我不想要的网格:(

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

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

问题如何在不破坏精灵后面的网格的情况下删除动画的前几帧？

Answer 1

这里常用的操作是清空重绘。
但是如果你的背景没有改变，它可能会变得很麻烦。

在这种情况下，一个简单的解决方案是使用屏幕外 canvases，它将充当图层。

首先在初始阶段在屏幕外 canvas 上绘制网格。
然后在你的循环中，你只需在主上下文中使用 drawImage 方法绘制你的屏幕外 canvas 。

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];
} 

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

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

Sprite Animation clearRect替代品？

Sprite Animation clearRect alternative?

html

javascript

animation

canvas

sprite-sheet