2017-02-22 55 views
2

ive следил за учебником о том, как сделать простой холст. Тем не менее, холст не отображается в любом цвете, хотя я точно следил за учебником. любая помощь. его bugging me:/html холст, не заполненный цветом

<html> 

some text here 

<canvas id="gamecanvas" width="800" height="600></canvas>] 

<script> 
var Canvas; 
var canvasContext; 

window.onload = function() { 
    console.log("Hello world!"); 
    Canvas = document.getElementById("gamecanvas"); 
    canvasContext = canvas.getcontext('2d'); 
    canvasContext.fillStyle = 'red'; 
    canvasContext.fillRect(0,0,canvas.width,canvas.height); 
}  
</script> 
</html> 

Редактировать: Спасибо за помощь. Решено!

+0

ваше смешивание '' canvas' и Canvas'. in js case questions – llamerr

+0

Как этот вопрос поднимается? Как код с ошибками может быть полезен кому-то? –

+0

Не стесняйтесь отмечать ответ, который помог вам в правильном ответе – Yannjoel

ответ

2

Слишком много ошибок синтаксиса.

Это работает

<html> 

some text here 

<canvas id="gamecanvas" width="800" height="600"></canvas> 

    <script> 
    var Canvas; 
    var canvasContext; 

    window.onload = function() { 
     console.log("Hello world!"); 
     Canvas = document.getElementById("gamecanvas"); 
     canvasContext = Canvas.getContext('2d'); 
     canvasContext.fillStyle = 'red'; 
     canvasContext.fillRect(0,0,Canvas.width,Canvas.height); 

    }  
    </script> 
</html> 
+0

Что не так в этом, почему я получаю отрицательные голоса? –

3

Вы сделали две ошибки

  • Вы были смесительные canavs и Canvas

  • Вы написали getContext с непереключаемых капитала c


Не забывайте, что переменные и имена методов являются caseensitve в JavaScript.

Так canavas разве то же переменный, как и Canavsgetcontext('2d') не тот же метод, getContext('2d').


Heres огурчик, в котором я исправил ошибки:

var canvas; 
 
var canvasContext; 
 

 
window.onload = function() { 
 
    console.log("Hello world!"); 
 
    canvas = document.getElementById("gamecanvas"); 
 
    canvasContext = canvas.getContext('2d'); 
 
    canvasContext.fillStyle = 'red'; 
 
    canvasContext.fillRect(0,0,canvas.width,canvas.height); 
 

 
}
some text here 
 
<canvas id="gamecanvas" width="800" height="600"></canvas>