我试着在画布里放一幅画。但就是没有出现。我谷歌了一下，看看哪里出了问题。不幸的是，我还是解决不了。这是我的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<link rel="stylesheet" href="mainStyle.css">
<body>
<div class="game-border">
<canvas id="gc"></canvas>
<script>
window.onload=function(){
var cnvs=document.getElementById("gc");
var ctx=cnvs.getContext("2d");
var img=new Image();
img.src="/img/road.jpg";
ctx.drawImage(img,0,0);
};
</script>
</div>
</body>
</html>
这是css文件
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.game-border{
display: flex;
justify-content: center;
justify-items: center;
}
#gc{
width: 100vmin;
height: 100vmin;
background-color: coral;
}
如果在图像完成加载之前尝试调用drawImage()，它将不会执行任何操作。因此,您需要确保使用load事件,以便在映像加载之前不要尝试此操作：
var img = new Image(); // Create new img element
img.addEventListener('load', function() {
// execute drawImage statements here
ctx.drawImage(img,0,0);
}, false);
img.src = 'myImage.png'; // Set source path
来源:https://developer.mozilla.org/en-us/docs/web/api/canvas_api/tutorial/using_images
