使用 Canvas 元素的问题

Question

我在所有浏览器中使用 Canvas 元素时遇到问题。 Web 控制台显示“脚本错误”，但我使用的方法与我在其他项目中使用的方法相同，效果很好，我的代码如下：

<!DOCTYPE html>
<html lang="pt-BR">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="script.js"></script>
</head>
<body>
        <canvas id="canvas"></canvas>
</body>
</html>

和 javascript 文件：

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

*我的浏览器支持 Canvas 元素

*javascript 包含“const ctx”的行被我的 Web 控制台指定为错误，我做了什么？

Answer 1

问题是 JS 文件在 canvas 之前加载。要解决此问题，请将脚本标记移至正文：

<body>
    <canvas id="canvas"></canvas>
    <script src="script.js"></script>
</body>

或者，如果您想将脚本标记保留在头部，请将 canvas 代码移动到 window.onload:

window.onload = function() {
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'green';
    ctx.fillRect(10, 10, 100, 100);
}

使用 Canvas 元素的问题

Problems using the Canvas element

javascript

canvas

html5-canvas