キャンバスが着色されていない

-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); 
}

出典

2017-10-13 thejdah

Typo： 'fuction'。 [ブラウザコンソール（dev tools）]（https://webmasters.stackexchange.com/q/8525）（「F12」を押す）を使用してエラーを読んでください。 – Xufox

あなたのfuctionの更新が機能更新する必要があります - >単語 "機能"

のタイプミスを参照してください以下の修正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>

出典

2017-10-13 04:09:43 Arkhaine

キャンバスが着色されていない

答えて

関連する問題