个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-27 23:49:54 26 4
gpt4 key购买 nike

我遵循了 Derek Banas 关于创建俄罗斯方 block 游戏的 YouTube 教程。但是当我在 Google Chrome 上打开我的 HTML 文件(“Tetris.html”)时，它只会打开一个空白页面，没有其他任何内容。

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

HTML 文件(“Tetris.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”)，因为我认为它没有任何问题。如果我不应该告诉我。

最佳答案

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

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

关于javascript - 打开 HTML 文件时出现空白页，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56606135/

26 4 0
文章推荐： Javascript 在滚动页面的特定百分比上开始和结束
文章推荐： C++ 是否有类似 RVO 的东西用于将临时对象传递给函数？
文章推荐： javascript - 如何消除 Angular JS 中的 404 错误？
文章推荐： c++ - 将函数指针作为非类型模板参数传递
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com