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

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

javascript image html5-canvas

Javascript 尝试在JS中使用单独的图像文件,javascript,image,html5-canvas,Javascript,Image,Html5 Canvas,我正在尝试用JS制作一个简单的视频游戏。我只想要一个可以在屏幕上移动的精灵。我正在使用与html文件位于同一目录中的jpg文件，但图像不会显示。这是代码 <!doctype html> <html> <head> </head> <body> <center> <canvas id="canvas" width="500" height="500" styl

我正在尝试用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>


var x=10；
变量y=10；
var sprt=“stand.jpg”；
函数绘图（）{
var cv=document.getElementById（“画布”）.getContext（“2d”）；
cv.clearRect（0,0500）；
cv.drawImage（sprt，x，y）；
}
设置间隔（抽签，10）；

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


var x=10；
变量y=10；
var sprt=document.querySelector（'img'）
函数绘图（）{
var cv=document.getElementById（“画布”）.getContext（“2d”）；
cv.clearRect（0,0,500,500）；
cv.drawImage（sprt，x，y）；
}
设置间隔（抽签，10）；

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

<!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>


var x=10；
变量y=10；
var sprt=新图像（）；
sprt.src=“./path/to/image/from/root/directory/stand.jpg”；
函数绘图（）{
var cv=document.getElementById（“画布”）.getContext（“2d”）；
cv.clearRect（0,0500）；
/*也许：
*cv.fillStyle=“黑色”；
*cv.fillRect（0,0500500）；
* */
cv.drawImage（sprt，x，y）；
}
设置间隔（抽签，10）；