简单的J.S.错误(没有错误日志)
简单的J.S.错误(没有错误日志)
提问于 2019-12-19 12:38:48
大家好，谢谢你们帮我。
我试图在javaScript中创建一个小型汽车游戏，但实际上我无法打印图像.这是我的JS代码：
// Parametters
const canvasWidth = 500;
const canvasHeight = 500;
const carLength = 60;
const carWidth = 30;
const canvas = document.getElementById('canvas');
canvas.width = canvasWidth;
canvas.height = canvasHeight;
const context = canvas.getContext('2d');
drawAll();
function drawAll() {
console.log('draw canvas background');
context.fillStyle = 'green';
context.fillRect(0, 0, canvasWidth, canvasHeight);
drawCar();
}
function drawCar() {
let image = new Image();
image.src = 'assets/images/car_orange.png';
context.drawImage(image, 200, 200, carLength, carWidth);
}这是html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="assets/images/pageIcon/pageIcon.ico" type="image/x-icon" />
<title>CrossingCars</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script src="drinving_environment.js"></script>
</body>
</html>错误在于，我的代码没有像drawCar()函数应该做的那样打印图像，但是如果我在控制台中单独键入每一行代码，它就会工作.
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-12-19 13:23:32
因为你的图像内容还没有加载。你应该等到你的图像被加载。
请参考这个答案这里这个问题总是发生在画布上。
...
function drawCar() {
let image = new Image();
image.src = 'assets/images/car_orange.png';
image.onload = function() {
context.drawImage(image, 200, 200, carLength, carWidth);
}
}
...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59409985
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号