Question

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

问题！要删除动画的前一帧，我使用了clearRect（）。然而，这打破了我不想要的网格：（

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

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

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

Answer 1

这里的共同行动是清除所有内容并重新绘制所有内容但是，如果在你的情况下你的背景没有改变，它可能变得很麻烦。

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

首先，您在初始阶段在此离屏画布上绘制网格然后在循环中，您只需使用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];
}	

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>

精灵动画clearRect替代？

1 个答案: