Холст
• 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 пикселов), содержимое
холста будет стерто, а состояние стилей заливки, обводки, толщины линии и т. п. сбросится.
Фактически это обнуление холста — трюк или проблема, в зависимости от того, как на это
посмотреть.
Достарыңызбен бөлісу: 
