Черный ректангл

Важно понимать: сам элемент canvas является ч астью DOM HTML-документа, но все, что в него загружается, — линии, фигуры, надписи — про DOM ничего не знает. И у них это взаимно.

Добавление canvas на страницу очень просто:

<canvas id="myCanvas" width="500" height="300"> Your browser does not support HTML5 Canvas. </canvas>

На этом, кстати, HTML в этой главе почти заканчивается. Самое главное сделано — мы вставили холст в страницу, и ему присвоен идентификатор, как можно догадаться, текст внутри тегов будет виден в том случае, если браузер canvas не поддерживает.

Теперь скриптом получим для этого элемента контекст и попытаемся что-нибудь нарисовать:

<script>

Function canvasSupport () {

Return!!document. createElement(‘testcanvas’).getContext;

}

$(function(){

Var canvas = document. getElementById("myCanvas"); var context = canvas. getContext("2d"); context. fillRect(10,10, 300, 300):

});

</script>

Мы тут используем javaScript библиотеку jQuery, но исключительно для того, чтобы снизить количество не имеющего отношения к делу кода. Происходит в этом небольшом скрипте, запускаемом после загрузки страницы, следующее.

Мы получаем ранее размещенный элемент canvas в переменную, затем получаем контекст для рисования. В данном случае это 2D-контекст, то есть контекст двумерной графики.

Далее методом fillRect() рисуем квадрат (вернее, заливаем его принятым по умолчанию траурным цветом). Цифры в скобках — это отступ левого верхнего угла фигуры по вертикали, отступ слева, ширина и высота.

На этом все — «Hello Word!» для canvas написан (рис. 29). Правда, выглядит он как-то совсем не интересно, да и потомки Малевича могут упрекнуть в плагиате. Поэтому немножко оживим наш холст.

С начала просто изменим цвет заливки. Это несложно:

Var context = canvas. getContext("2d"); context. GillStyle = ‘#5F5’; context. fillRect(20, 20, 300,300);

Рис. 29. Первый шедевр на Canvas

Теперь добавим надпись (иначе какое это «Hello»?):

Context. fillStyle = ‘#5F5’; context. fillRect(20, 20, 300, 300): context. font = ”50px serif” context. fillStyle = ”#FF0000”; context. fillText (”Hello Canvas!”, 30, 90);

Как видим, перед выведением надписи мы изменили текущую заливку. Это основной прием работы с canvas — все сохраняет контекст (в нашем случае воплощенный в одноименной переменной). Ну вот, результат выглядит несколько приличнее (рис. 30).

Теперь, поздоровавшись, давайте разбираться более последовательно. Как ясно из приведенного выше примера, при рисовании на холсте расположение нарисованных объектов отчитывается от начала координат в левом верхнем углу. Сам процесс рисования у нас пока осуществлялся командой вида fill*, то есть заливкой определенной области выбранным цветом.