Javascript 图像不'；t使用onLoad（）中的代码在JS画布上渲染；_Javascript_Html_Canvas

Javascript 图像不'；t使用onLoad（）中的代码在JS画布上渲染；

javascript html canvas

Javascript 图像不'；t使用onLoad（）中的代码在JS画布上渲染；,javascript,html,canvas,Javascript,Html,Canvas,我试图用JS编写一个简单的游戏，主角是鱼的形象。但是，无论我尝试什么，我都无法加载图像。我查阅了一些教程，但没有一本是有效的。我读到我需要将图像代码放入onload（）中所以是片段中缺少的canvasContext方法 var-fishX=400； var fishY=300； var-fishSpeed=10； var-fishSize=80； window.onload=函数（）{ var framesPerSecond=60； log（“页面加载！”）； canvas=documen

我试图用JS编写一个简单的游戏，主角是鱼的形象。但是，无论我尝试什么，我都无法加载图像。我查阅了一些教程，但没有一本是有效的。我读到我需要将图像代码放入

onload（）中所以

是片段中缺少的canvasContext
方法

var-fishX=400；
var fishY=300；
var-fishSpeed=10；
var-fishSize=80；
window.onload=函数（）{
var framesPerSecond=60；
log（“页面加载！”）；
canvas=document.getElementById（'canvas'）；
canvasContext=canvas.getContext（'2d'）；
setInterval（函数img（）{}，1000/framesPerSecond）；
canvasContext.drawImage（img，10,10）；
}
var img=document.getElementById（“fish”）；
document.onkeydown=checkKey；
功能检查键（e）{
e=e | | window.event；
如果（e.keyCode==“38”| |“87”）{
//向上箭头
鱼腥味=鱼腥味+鱼腥味速度；
}else if（e.keyCode==“40”| |“83”）{
//向下箭头
鱼腥味=鱼腥味+鱼腥味速度；
}else if（e.keyCode==“37”| |“65”）{
//左箭头
fishX=fishX+fishSpeed；
}else if（e.keyCode==“39”| |“68”）{
//右箭头
fishX=fishX+fishSpeed；
}
}

setInterval（函数img（）{}，1000/framesPerSecond）
这每秒不执行任何操作60次canvasContext=canvas.getContext（'2d'）；不定义canvasContext？是，但方法不会作为canvasContext.drawImage…
<!DOCTYPE html>
<html>
<head>
<title>Fish Game</title>
<style>

</style>
</head>
<canvas id="canvas" width="800" height="600" style="border:1px solid #000000; background: blue"></canvas>
<script>
var fishX = 400;
var fishY = 300;
var fishSpeed = 10;
var fishSize = 80;

 window.onload = function() {
        var framesPerSecond = 60;

        console.log("Page Loaded!");
        canvas = document.getElementById('canvas');
        canvasContext = canvas.getContext('2d');
        setInterval(function img() {
        }, 1000/framesPerSecond);
        drawImage(img, 10, 10);

 }

var img = document.getElementById("fish");

document.onkeydown = checkKey;

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38' || '87') {
        // up arrow
        fishY = fishY + fishSpeed;
    }
    else if (e.keyCode == '40' || '83') {
        // down arrow
        fishY = fishY + fishSpeed;
    }
    else if (e.keyCode == '37' || '65') {
       // left arrow
       fishX = fishX + fishSpeed;
    }
    else if (e.keyCode == '39' || '68') {
       // right arrow
       fishX = fishX + fishSpeed;
    }
}
</script>

<body>
<img src="fish.png" id="fish" width="80px"  >


</body>
</html>