尝试在 JS 中使用单独的图像文件

Question

我正在尝试用 JS 制作一个简单的视频游戏。我只想拥有一个可以在屏幕上移动的精灵。我正在使用与 html 文件位于同一目录中的 jpg 文件，但图像不会显示。这是代码。

<!doctype html>
<html>
<head>
</head>
<body>
<center>
<canvas id="canvas" width="500" height="500" style="border:10px solid black;"/>
</center>
<script>
var x = 10;
var y = 10;
var sprt = "stand.jpg";
function draw() {
var cv = document.getElementById("canvas").getContext("2d");
cv.clearRect(0,0,500,500);
cv.drawImage(sprt,x,y);
}
setInterval(draw,10);
</script>
</body>
</html>

我不明白我做错了什么。任何帮助都会很棒，谢谢。

Answer 1

<!doctype html>
<html>

<head>
</head>

<body>
  <center>
    <canvas id="canvas" width="500" height="500" style="border:10px solid black;" />

  </center>
  <img src="stand.jpg" style="display: none" />
  <script>
    var x = 10;
    var y = 10;
    var sprt = document.querySelector('img')

    function draw() {
      var cv = document.getElementById("canvas").getContext("2d");
      cv.clearRect(0, 0, 500, 500);
      cv.drawImage(sprt, x, y);
    }
    setInterval(draw, 10);
  </script>
</body>

</html>

这里有更多信息https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

Answer 2

您只是缺少源图像的创建：

<!DOCTYPE html>
<html>
    <head> </head>
    <body>
        <center>
            <canvas id="canvas" width="500" height="500" style="border: 10px solid black" />
        </center>
        <script>
            var x = 10;
            var y = 10;
            var sprt = new Image();
            sprt.src = "./path/to/image/from/root/directory/stand.jpg";
            function draw() {
                var cv = document.getElementById("canvas").getContext("2d");
                cv.clearRect(0,0,500,500);
                /* Maybe:
                 * cv.fillStyle = "black";
                 * cv.fillRect(0,0,500,500);
                 * */
                cv.drawImage(sprt, x, y);
            }
            setInterval(draw, 10);
        </script>
    </body>
</html>

尝试在 JS 中使用单独的图像文件

Trying to use separate image file in JS

javascript

image

html5-canvas