Question

我正在按照教程填充颜色的画布。没有着色。这可能是因为函数update（）和函数draw（）是空的吗？

<!DOCTYPE html>
<html>
    <head>
        <title>Basic Example</title>
        <script src="BasicExample.js">  
        </script>
    </head>
    <body>
        <div id="gameArea">
            <canvas id="myCanvas" width="800" height="480"></canvas>
        </div>
    </body>
</html>

javascript文件

var canvas = undefined;
var canvasContext = undefined;

function start () {
    canvas = document.getElementById("myCanvas");
    canvasContext = canvas.getContext("2d");
    gameLoop();
}

document.addEventListener('DOMContentLoaded', start);

fuction update() {
}

function draw() {
}

function gameLoop () {
    canvasContext.fillStyle = "blue";
    canvasContext.fillRect(0, 0, canvas.width, canvas.height);
    update();
    draw();
    window.setTimeout(gameLoop, 100 / 60);
}

Answer 1

您的功能更新应该是功能更新 - ＆gt;拼写单词“function”

请参阅下面更正的html /脚本：

<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<div id="gameArea">
    <canvas id="myCanvas" width="800" height="480"></canvas>
</div>
<script>
var canvas = undefined;
var canvasContext = undefined;

function start () {
    canvas = document.getElementById("myCanvas");
    canvasContext = canvas.getContext("2d");
    gameLoop();
}

document.addEventListener('DOMContentLoaded', start);

function update() {
}

function draw() {
}

function gameLoop () {
    canvasContext.fillStyle = "blue";
    canvasContext.fillRect(0, 0, canvas.width, canvas.height);
    update();
    draw();
    window.setTimeout(gameLoop, 100 / 60);
}   
</script>
</body>
</html>

帆布没有着色

1 个答案: