Javascript JS图像未显示在画布上
我有一个bird={}对象，我在其中定义了一个draw函数，但是在render函数中调用时图像不会出现。有人能告诉我我做错了什么吗？提前谢谢 编辑：我注意到它不总是出现的原因是因为屏幕上有其他精灵，当我关闭它们时，鸟总是出现。有什么办法可以解决这个问题吗Javascript JS图像未显示在画布上,javascript,drawimage,Javascript,Drawimage,我有一个bird={}对象，我在其中定义了一个draw函数，但是在render函数中调用时图像不会出现。有人能告诉我我做错了什么吗？提前谢谢 编辑：我注意到它不总是出现的原因是因为屏幕上有其他精灵，当我关闭它们时，鸟总是出现。有什么办法可以解决这个问题吗 bird={ 绘图：函数（）{ var birdimg=新图像（）； birdimg.onload=函数（）{ ctx.drawImage（鸟瞰-20，高度-200）； } birdimg.src=“//i.stack.imgur.com/n
bird={
绘图：函数（）{
var birdimg=新图像（）；
birdimg.onload=函数（）{
ctx.drawImage（鸟瞰-20，高度-200）；
}
birdimg.src=“//i.stack.imgur.com/nsZLM.png”；//“assets/bird.png”；
}
};
函数main（）{
canvas=document.createElement（“canvas”）；
//将宽度和高度设置为浏览器的大小
宽度=window.innerWidth；
高度=窗内高度；
//如果宽度大于500，则设置游戏框架
如果（宽度>=500）{
宽度=320；
高度=480；
canvas.style.border=“1px solid#000”；
evt=“mousedown”；
}
//将画布大小设置为宽度和高度变量
画布宽度=宽度；
canvas.height=高度；
ctx=canvas.getContext（“2d”）；
//设置默认状态
currentstate=states.Splash；
document.body.appendChild（画布）；
render（）；
}
函数render（）{
//加鸟
鸟。画（）；
//加载sky.png
bgimg=新图像（）；
bgimg.onload=函数（）{
ctx.drawImage（bgimg，-20，高度-200）；
ctx.drawImage（bgimg，256，高度-200）；
}
bgimg.src=“assets/sky.png”；
//装载地面img
landimg=新图像（）；
landimg.onload=函数（）{
ctx.drawImage（兰迪姆，0，高度-100）；
}
landimg.src=“assets/land.png”；
//创建为背景着色的矩形。这是底层。在上面编写代码
ctx.fillStyle=“#4ec0ca”；
ctx.fillRect（0,0，canvas.width，canvas.height）；
ctx.stroke（）；
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script>
// declare vars so they are available outside of main()
var canvas,
ctx,
width,
height;
var bird = {
draw: function() {
var birdimg = new Image();
birdimg.src ="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg";
birdimg.onload = function() {
ctx.drawImage(birdimg, -20, height - 200);
};
}
};
function main(){
canvas = document.createElement("canvas");
//Set the width and height to the sizes of the browser
width = window.innerWidth;
height = window.innerHeight;
//Frames the game if the width is larger than 500
if(width >=500){
width = 320;
height = 480;
canvas.style.border = "1px solid #000";
var evt = "mousedown";
}
//Sets the canvas sizes to the width and height variables
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext("2d");
//Set the default state
// "states" is not defined so I'm commenting this out
// var currentstate = states.Splash;
document.body.appendChild(canvas);
render();
}
main();
function render(){
//Adding bird
bird.draw();
}
</script>
</body>
</html>
JS-Bin
//声明变量，使其在main（）之外可用
var canvas，
ctx，
宽度，
高度；
var bird={
绘图：函数（）{
var birdimg=新图像（）；
birdimg.src=”http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg";
birdimg.onload=函数（）{
ctx.drawImage（鸟瞰-20，高度-200）；
};
}
};
函数main（）{
canvas=document.createElement（“canvas”）；
//将宽度和高度设置为浏览器的大小
宽度=window.innerWidth；
高度=窗内高度；
//如果宽度大于500，则设置游戏框架
如果（宽度>=500）{
宽度=320；
高度=480；
canvas.style.border=“1px solid#000”；
var evt=“mousedown”；
}
//将画布大小设置为宽度和高度变量
画布宽度=宽度；
canvas.height=高度；
ctx=canvas.getContext（“2d”）；
//设置默认状态
//“状态”并没有定义，所以我要对此进行评论
//var currentstate=states.Splash；
document.body.appendChild（画布）；
render（）；
}
main（）；
函数render（）{
//加鸟
鸟。画（）；
}
Nick Leoutsakosmain（）从未被调用<代码>状态不存在，并且资产仅存在于您的本地计算机上（您需要上载它）。也可以考虑使用变量来存储值。我没有在这里写它，但是它是在原始代码上。关于最初的问题，你有什么好的建议吗？你可以上传鸟的图片（使用编辑器中的图片上传按钮）并将你的img src链接到该图片，这样我们就可以检查鸟是否画在画布区域之外。另外，请删去问题中包含的示例，使其可以运行（无需使用
状态