Javascript：我的画布什么也没画_Javascript_Html5 Canvas

Javascript：我的画布什么也没画

javascript html5-canvas

Javascript：我的画布什么也没画,javascript,html5-canvas,Javascript,Html5 Canvas,我正在做一个基本的游戏循环，所以我从基本的立方体练习开始，我写了下面的例子，但它不起作用。我试着看看是否有拼错的地方，但我什么也找不到 <!DOCTYPE HTML> <html> <head> <title>Game</title> <style type="text/css"> #GameCanvas { background-color: #FF0000; } </style> </head&g

我正在做一个基本的游戏循环，所以我从基本的立方体练习开始，我写了下面的例子，但它不起作用。我试着看看是否有拼错的地方，但我什么也找不到

<!DOCTYPE HTML>
<html>
<head>
<title>Game</title>
<style type="text/css">
#GameCanvas {
   background-color: #FF0000;
}
</style>
</head>
<body>
<canvas id="GameCanvas" width="1000" height="600"></canvas>
<script type="text/javascript">
var canvas = document.findElementById("GameCanvas");
var graphics = canvas.getContext("2d");
function Update() {}
function Draw() {
graphics.beginPath();
graphics.fillRect(20, 20, 50, 50);
graphics.fillStyle = "#FFFFFF";
graphics.fill();
graphics.closePath();
}
function GameLoop() {
Update();
Draw();
requestAnimFrame(GameLoop);
}
requestAnimFrame(GameLoop);
</script>
</body>
</html>


游戏
#游戏画布{
背景色：#FF0000；
}
var canvas=document.findElementById（“GameCanvas”）；
var graphics=canvas.getContext（“2d”）；
函数更新（）{}
函数绘图（）{
graphics.beginPath（）；
graphics.fillRect（20,20,50,50）；
graphics.fillStyle=“#ffffffff”；
graphics.fill（）；
graphics.closePath（）；
}
函数GameLoop（）{
更新（）；
Draw（）；
请求帧（GameLoop）；
}
请求帧（GameLoop）；

这里有几个错误，

document.findElementById

不存在，请将其更改为

document.getElementById

在这两种情况下，

requestAnimationFrame

都应更改为

requestAnimationFrame

通过这些更改，循环运行并在屏幕上绘制一个正方形

<!DOCTYPE HTML>
<html>
<head>
<title>Game</title>
<style type="text/css">
#GameCanvas {
   background-color: #FF0000;
}
</style>
</head>
<body>
<canvas id="GameCanvas" width="1000" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("GameCanvas");
var graphics = canvas.getContext("2d");
function Update() {}
function Draw() {
  graphics.beginPath();
  graphics.fillRect(20, 20, 50, 50);
  graphics.fillStyle = "#FFFFFF";
  graphics.fill();
  graphics.closePath();
}
function GameLoop() {
  Update();
  Draw();
  requestAnimationFrame(GameLoop);
}
requestAnimationFrame(GameLoop);
</script>
</body>
</html>


游戏
#游戏画布{
背景色：#FF0000；
}
var canvas=document.getElementById（“GameCanvas”）；
var graphics=canvas.getContext（“2d”）；
函数更新（）{}
函数绘图（）{
graphics.beginPath（）；
graphics.fillRect（20,20,50,50）；
graphics.fillStyle=“#ffffffff”；
graphics.fill（）；
graphics.closePath（）；
}
函数GameLoop（）{
更新（）；
Draw（）；
requestAnimationFrame（GameLoop）；
}
requestAnimationFrame（GameLoop）；

这里有几个错误，

document.findElementById

不存在，请将其更改为

document.getElementById

在这两种情况下，

requestAnimationFrame

都应更改为

requestAnimationFrame

通过这些更改，循环运行并在屏幕上绘制一个正方形

<!DOCTYPE HTML>
<html>
<head>
<title>Game</title>
<style type="text/css">
#GameCanvas {
   background-color: #FF0000;
}
</style>
</head>
<body>
<canvas id="GameCanvas" width="1000" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("GameCanvas");
var graphics = canvas.getContext("2d");
function Update() {}
function Draw() {
  graphics.beginPath();
  graphics.fillRect(20, 20, 50, 50);
  graphics.fillStyle = "#FFFFFF";
  graphics.fill();
  graphics.closePath();
}
function GameLoop() {
  Update();
  Draw();
  requestAnimationFrame(GameLoop);
}
requestAnimationFrame(GameLoop);
</script>
</body>
</html>


游戏
#游戏画布{
背景色：#FF0000；
}
var canvas=document.getElementById（“GameCanvas”）；
var graphics=canvas.getContext（“2d”）；
函数更新（）{}
函数绘图（）{
graphics.beginPath（）；
graphics.fillRect（20,20,50,50）；
graphics.fillStyle=“#ffffffff”；
graphics.fill（）；
graphics.closePath（）；
}
函数GameLoop（）{
更新（）；
Draw（）；
requestAnimationFrame（GameLoop）；
}
requestAnimationFrame（GameLoop）；

您尝试过其他颜色吗？您尝试过其他颜色吗？