时间戳

首页 > 解决方案 > 打开 HTML 文件时出现空白页

javascript - 打开 HTML 文件时出现空白页

问题描述

我按照 Derek Banas 的 YouTube 教程创建俄罗斯方块游戏。但是当我在 Google Chrome 上打开我的 HTML 文件（“Tetris.html”）时，它只会打开一个空白页面，没有别的。

我试过更新 Chrome，但我有最新版本。我也试过打开旧的 HTML 文件，没有问题。我的 CSS、JS 和 HTML 文件位于同一个文件夹中。

HTML 文件（“俄罗斯方块.html”）：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">       
        <meta name="viewport" content="width = device-width, initial-scale = 1">
        <title>JavaScript Tetris</title>
        <link rel="stylesheet" type="text/css" href="mainstyle.css">
        <script src="TetrisBasic.js"></script>
    </head>
    <body>
        <canvas id='my-canvas'></canvas>
    </body>
</html>

CSS 文件（“mainstyle.css”）：

body {
    text-align: center;
    background: #fff;
}
#my-canvas {
    background: #fff;
    margin-left: 10px;
    margin-top: 10px;
}

我不包括我的 JS 文件（“TetrisBasic.js”），因为我认为它没有任何问题。告诉我我是否应该这样做。

标签： javascripthtmlcssgoogle-chrome

解决方案

它是空白的，因为您的画布没有颜色。css 中提供的颜色是#fff。因此，如果您想在页面中看到画布，您需要更改背景或为您的#my-canvas 类添加一些边框颜色。像这样的东西：

#my-canvas {
    background: #000;
    margin-left: 10px;
    margin-top: 10px;
}

推荐阅读