Question

我正在学习html画布，下面是我的HTML代码。

<!DOCTYPE html>
<html>
<head>
<script language="javascript">
function moveImage(x) { 
    var context = document.getElementById('myCanvas').getContext("2d");
    var img = new Image();
    img.onload = function () {
    context.drawImage(img, x, 259);
}
img.src = "flower.jpg";
}

function startDrawing() {   
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    context.beginPath();
    context.moveTo(50, 300);
    context.lineTo(950, 300);
    context.stroke();
    var x=50;   
    setInterval(function() {
        x = x+20;
        moveImage(x);
    }, 1000);
}
</script>
</head>
<body onload="startDrawing()">
    <canvas id="myCanvas" width="1000" height="1000">
</body>
</html>

请从以下代码中找到以下输出：

如何删除旧框架的痕迹＆＃39; （花的），在屏幕截图中从左到右移动的时候你可以看到很多花？请帮助修改所需的代码。

感谢。

Answer 1

问题是你在再次画画之前不清除画布。您可以使用clearRect清除它。

setInterval(function() {
  // Clear the canvas
  context.clearRect(0, 0, canvas.width, canvas.height);
  x += 20;
  moveImage(x);
}, 1000);

请注意，这将清除整个画布。如果您要渲染其他任何内容，则您需要在清除后重绘它。

Answer 2

您需要重新渲染帧。这是我写的一个不完整游戏的一些代码：

var main = function () {
  var now   = Date.now(),
      delta = now - then;

  update(delta / 1000);
  render();

  then = now;

  // Request to do this again ASAP
  requestAnimationFrame(main);
};

GitHub repo code

我的渲染函数包含context.drawImg()作品（正确重新渲染），与您的moveImage函数类似。

编辑：一点解释。图像轨迹是每个更新位置处图像的先前渲染。如果没有重置帧本身，图像的每次移动都会保留在屏幕上，从而呈现出一系列图像。

html canvas - 运动图像的问题

2 个答案: