Я играю с холстом.Как мне заставить его работать?

Question

Вот мой HTML:

<canvas id="test" width="400" height="200"></canvas>

вот мой JavaScript:

var canvas_one = document.getElementById("test");
var canvas_context = canvas_one.getContext("2d");
canvas_context.fillRect(50, 25, 150, 100);

Я просто экспериментирую с этим, и, похоже, ни один из уроков не работает. Я использую Chrome в качестве браузера.

Оригинальная опечатка была только здесь; не в моем редакторе. Извините за это.

Я получаю сообщение об ошибке: Uncaught TypeError: Невозможно вызвать метод 'getContext' с нулевым значением, даже с примером jsfiddle.

Хорошо, я понял, что случилось. Поскольку мой javascript был в заголовке html-файла, он загружался до полной загрузки DOM, поэтому, когда он попытался выполнить var canvas_one = document.getElementById("test");, он установил canvas_one в null. Итак, я просто обернул его в jquery так:

$(document).ready(function(){
var canvas_one = document.getElementById("test");
var canvas_context = canvas_one.getContext("2d");

canvas_context.fillStyle = "rgb(255,0,0)";
canvas_context.fillRect(10, 25, 150, 100);

});

Теперь он ожидает загрузки DOM, прежде чем читает javascript и все работает.

Answer 1

Учебное пособие по mozilla , на мой взгляд, является лучшим, попробуйте.

Исправьте следующее: document.getElementById , вы просто ввели его неправильно.1007 *

Answer 2

Убедитесь, что любой код, который ссылается на DOM, выполняется только после того, как DOM готов. Это может быть достигнуто путем помещения всего в функцию, которая вызывается с помощью window.onload, или с помощью jQuery или подобной библиотеки, чтобы сделать это за вас.

Answer 3

У вас есть опечатка для getElementById, также я предлагаю также установить fillStyle.

Live Demo

var canvas_one = document.getElementById("test");
var canvas_context = canvas_one.getContext("2d");

canvas_context.fillStyle = "rgb(255,0,0)";
canvas_context.fillRect(10, 25, 150, 100);