Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Копирование изображений на холст

.

Копирование изображений на холст

Мы можем копировать на холст изображения со страницы. Для наглядности возьмем логотип HTML5. Начнем с добавления его к нашей странице в виде элемента img:

Копирование изображений на холст

Затем, после получения управления элементом canvas и создания контекста, мы можем обратиться к логотипу HTML5 через document. getElementByld:

Копирование изображений на холст

Мы будем применять тот же стиль, который использовался нами для визуализации элемента canvas:

Копирование изображений на холст

На рис. 11.8 вы видите пустой холст под изображением.

Копирование изображений на холст

Рис. 11.8. Изображение и холст — и больше пока ничего

Мы будем использовать метод drawlmage элемента canvas для копирования изображения на холст:

Копирование изображений на холст

Поскольку исходная точка для копирования изображения имеет координаты (0,0), изображение возникнет в левом верхнем углу холста, как показано на рис. 11.9.

Копирование изображений на холст

Рис.11.9. Копируем рисунок на холст

Впрочем, скопированное изображение можно расположить и в центре холста. Для этого нужно изменить координаты токи вывода изображения. Поскольку логотип имеет размер 64×64 точек, а холст — 200×200, то, указав в качестве координат начальной точки (68. 68), мы разместим логотип прямо в центре, как показано на рис. 11.10.

Копирование изображений на холст

Рис. 11.10. Скопированное изображение размещено в центре холста

.

Читайте так же:
Not found