Javascript 导入js文件后，画布上没有显示任何内容_Javascript_Html_Html5 Canvas

Javascript 导入js文件后，画布上没有显示任何内容

javascript html html5-canvas

Javascript 导入js文件后，画布上没有显示任何内容,javascript,html,html5-canvas,Javascript,Html,Html5 Canvas,我正在尝试制作一个javascript游戏，但在我导入了一个js文件（car.js）之后，html画布上什么都没有显示，在我导入car.js之前，一切都显示出来了。我目前有一个名为cargame的文件夹，它包括3个文件：car.js、firstgame.html和index.js。我提供以下文件的内容 firstgame.html <!DOCTYPE html> <html> <head> <title>Web Page Design</ti

我正在尝试制作一个javascript游戏，但在我导入了一个js文件（car.js）之后，html画布上什么都没有显示，在我导入car.js之前，一切都显示出来了。我目前有一个名为cargame的文件夹，它包括3个文件：car.js、firstgame.html和index.js。我提供以下文件的内容

firstgame.html

<!DOCTYPE html>
<html>
<head>
<title>Web Page Design</title>

<style>
#gamescreen{
        border: 1px solid black;
}
#bgcolor{
    background-color: #b4b4b4;
}
</style>

</head>
<body id="bgcolor">
    <div align = "center" style="margin-top: 5%"><canvas id = "gamescreen" width = "500px" height = "600px"></canvas></div>

    <script src="index.js"></script>
</body>
</html>

car.js

import car from "./car";


let canvas = document.getElementById("gamescreen");
let ctx = canvas.getContext('2d');


const GAME_WIDTH = 500;
const GAME_HEIGHT = 600;

ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width/3, canvas.height)
ctx.fillRect((canvas.width/3 + canvas.width/3), 0, canvas.width/3, canvas.height)

ctx.fillStyle = '#2a2a2a';
ctx.fillRect(canvas.width/3, 0, canvas.width/3, canvas.height)

ctx.clearRect(0,0,500,600)
let Car = new car(GAME_WIDTH, GAME_HEIGHT);
Car.draw(ctx);

export default class car{
    constructor(gamewidth, gameheight){

        this.width = 100;
        this.height = 100;
        this.position = {
            x : gamewidth/2 - this.width/2,
            y : gameheight - this.height - 10,
        };
    }

    draw(ctx){
        ctx.fillStyle = '#ff6969';
        ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
    }

}

我的日志中出现以下错误

firstgame.html:1 Access to script at 'file:///C:/MY%20DATA/java%20projects/cargame/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

错误2

firstgame.html:19 GET file:///C:/MY%20DATA/java%20projects/cargame/index.js net::ERR_FAILED

您需要将type=“module”添加到脚本标记中

然后修复导入

从“/car.js”导入汽车；

您需要将项目放入任何本地服务器（如XAMP、MAMP、WAMP）中，并将“.js”添加到index.js文件中的汽车导入中，运行本地服务器，它就会工作

谢谢你的回答，但似乎没有帮助。我的画布仍然是空白的。尝试在导入中添加.js实际上我刚刚开始学习javascript，我正在学习一个教程，但我不知道我做错了什么。如何检查控制台日志？右键单击（鼠标），选择inspect或inspect elements（取决于您的浏览器），在打开的屏幕顶部，您会发现一种导航栏选择控制台问题是您试图通过file://协议直接访问html文件，这会导致跨源访问问题，尝试使用服务器为您提供静态文件，如果您使用的是npm，您可以使用以下内容：如何使用本地服务器，如您提供的名称？我所遵循的教程使用了codesandox.io，它运行得很好，但当我在那里尝试时，它给我的错误是，在路径中找不到模块。检查一下，您将了解如何安装xamp，安装后将项目放入安装xamp的htdocs文件夹中