2017-10-13 76 views
-1

我正在按照教程來填充顏色的畫布。沒有着色發生。這可能是因爲函數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); 
} 
+2

錯字:'功能'。使用[瀏覽器控制檯(開發工具)](https://webmasters.stackexchange.com/q/8525)(點擊'F12')並讀取任何錯誤。 – Xufox

回答

0

你機能的研究更新應該是功能更新 - >單詞 「功能」

錯字見修正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>