gpt4 book ai didi

javascript - 无法使用 HTML 和 Javascript 创建 Canvas

转载 作者:行者123 更新时间:2023-11-30 20:57:25 26 4
gpt4 key购买 nike

我对编码和这个网站都是全新的,我遇到了一个以前实际上不是问题的问题。

我正在观看一个用 Javascript 编写俄罗斯方 block 代码的视频,起初我使用 p5.js 编辑器来编写代码,但发现我遇到了很多问题,语法不匹配等.

我已经转向 Atom 编辑器,因为它似乎具有与视频类似的功能 - 请记住,我是一个绝对的初学者,我会尽力而为。

所以,这是代码。问题是它应该创建一个 240x400 的 Canvas ,并且在 p5.js 中它确实如此,但在其他任何地方都没有。我首先尝试使用 Node.js 来预览代码,但结果是空白。现在我在 Atom 中使用实时 HTML 预览包,它也变成空白。

<html>
<head>
<title>Tetris</title>
</head>
<body>
<canvas id="tetris" width="240" height="400"></canvas>
<script src="tetris.js"></script>
</body>
</html>

它引用的 Javascript 源代码如下。

const canvas = document.getElementById('tetris');
const context = canvas.getContext('2d');

context.fillStyle = '#000';
context.fillRect(0, 0, canvas.width, canvas.height);

我不知道如何解决这个问题,而且我不确定在这里发帖是否有任何用处,但我一直在绞尽脑汁试图让它在一个编辑器中工作干脆让我跟着,它可悲的不想配合。

在此先感谢您提供的任何帮助!

最佳答案

您的代码是正确的。您可以尝试等待您的绘图,直到页面完全加载:

document.addEventListener("DOMContentLoaded", function () {
const canvas = ...
...
});

关于javascript - 无法使用 HTML 和 Javascript 创建 Canvas ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47508929/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com