时间戳

首页 > 解决方案 > 简单的 JS 错误（应该没有错误日志）

javascript - 简单的 JS 错误（应该没有错误日志）

问题描述

大家好，感谢您试图帮助我..

我正在尝试在 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() 函数那样打印图像，但是如果我在控制台中分别键入每一行代码，它就可以工作......

在控制台使用之前

控制台使用后

标签： javascript

解决方案

因为您的图像内容尚未加载。您应该等到图像加载完毕。

请在此处参考此答案 此问题始终在画布上发生。

    ...
    function drawCar() {
        let image = new Image();
        image.src = 'assets/images/car_orange.png';
        image.onload = function() {
            context.drawImage(image, 200, 200, carLength, carWidth);
        }
    }
    ...

推荐阅读