Javascript: My canvas ничего не рисует

Я делаю базовый цикл игры, поэтому я начал с основного упражнения куба, и я написал пример ниже, но он не работает. Я попытался понять, есть ли что-то неправильно, но я ничего не мог найти.Javascript: My canvas ничего не рисует

<!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>

источник

2016-01-19 Anonymous

Вы попробовали другой цвет? – prabindh

У вас есть пара ошибок здесь, document.findElementById не существует, измените его на document.getElementById.

requestAnimFrame В обоих случаях следует изменить на 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>

источник

2016-01-19 17:12:48 IrkenInvader

большое спасибо, он исправил код, теперь он рисует –

Javascript: My canvas ничего не рисует

ответ

Смежные вопросы