Можностей, предоставляемых веб-разработчикам

Холст  •  169
В этом примере я создаю изображение на лету с помощью 
document.createElement
, и толь-
ко когда срабатывает событие 
onload
, я продолжаю строить узор для заливки. Перед тем 
как что-то делать с изображением, нужно обязательно дождаться завершения загрузки 
данных.
Когда изображение загружено, я могу определить стиль заполнения 
fillStyle
 с помощью 
метода 
createPattern
. В вызове метода — 
createPattern(this,
 
'repeat')
 — 
this
 отно-
сится к изображению, которое заставило сработать событие загрузки, однако в качестве 
источника можно указать, например, любой другой холст. Строка 
'repeat'
 соответствует 
синтаксису 
background-repeat
 в CSS; 
repeat-x
, 
repeat-y
 и 
no-repeat
 тоже будут работать 
в этом методе.
Если вы измените размер элемента 
canvas
 в коде CSS, то при этом он просто растянется. 
Фактически с пикселами ничего не случится — задействуется только узел DOM, как видно 
на рис. 5.9. Если нарисовать что-то на холсте и поменять свойства 
height
 и 
width
 элемента 
canvas
 (скажем, вас не устраивает размер по умолчанию 300×150 пикселов), содержимое 
холста будет стерто, а состояние стилей заливки, обводки, толщины линии и т. п. сбросится. 
Фактически это обнуление холста — трюк или проблема, в зависимости от того, как на это 
посмотреть.

жүктеу/скачать 5,47 Mb.

Достарыңызбен бөлісу: