ГРУППА КУРСА
|
Использование изображенияМетод drawImage() добавляет на холст изображение. drawImage(изображение, X изображения, Y изображения, ширина изображения, высота изображения, X на холсте, Y на холсте, ширина на холсте, высота на холсте) Параметры:
изображение - изображение, которое добавляется на холст X изображения - координата X той части картинки, которую нужно использовать Y изображения - координата Y той части картинки, которую нужно использовать ширина изображения - ширина той части картинки, которую нужно использовать высота изображения - высота той части картинки, которую нужно использовать X на холсте - координата X на холсте, куда помещается левый край картинки Y на холсте - координата Y на холсте, куда помещается верхний край картинки ширина на холсте - ширина, которую займёт картинка на холсте высота на холсте - высота, которую займёт картинка на холсте Обязательные параметры - изображение, X на холсте, X на холсте. Остальные можно не указывать. Если не указать параметры, относящиеся к изображению, то будет использована вся картинка. ширина на холсте и высота на холсте позволяют изменить масштаб картинки при добавлении на холст. Если они не указаны, то картинка или её часть имеет свои реальные размеры. Создадим холст и добавим на него картинку. HTML код: +
JavaScript:
Изображение можно загрузить динамически или использовать существующее на странице. Но метод drawImage() можно запускать только после загрузки картинки. Теперь укажем размеры, которые должны быть у картинки:
Учитывайте, что нужно обеспечить правильное соотношение длины и ширины. Когда вы добавляете на холст не всю картинку, а только её часть, то у метода drawImage() указываются все параметры, даже если масштаб не нужно менять.
|