canvas 中的图像在移动时消失 (JavaScript)

Question

我试图通过更改轴坐标将我的图像移动到 canvas 内，但是当它们移动时我的图像开始消失。 Gun class 代表我要包含在 canvas.

中的基础结构组件

var gun;
var canvas;

function AddGun() {
  gun = new Gun(100, 100, "images/gun.png", 0, 100);
}
class Gun {
  constructor(width, height, source, x, y) {
    canvas = document.getElementById("for-js");
    canvas.context = canvas.getContext('2d');
    var img = new Image();
    img.src = source;
    img.onload = function() {
      canvas.context.drawImage(img, x, y, width, height);
    }
  }
}

<body onload="AddGun()">
  <div class="game-block">
    <canvas id="for-js"></canvas>
  </div>
</body>

Answer 1

虽然在提供的代码中我没有看到图像将被动态移动到哪里。我想这是因为您的代码在某个地方将图像移到了 canvas 边界之外。这可能是图像开始消失的原因。

canvas 中的图像在移动时消失 (JavaScript)

image in a canvas disappearing when moves(JavaScript)

html

javascript

canvas