Рисование изображений на холсте - это процесс отображения растровых изображений, таких как фотографии или другие изображения, Этот процесс обычно включает загрузку изображения и его отображение на холсте с использованием контекста рисования.
Прежде чем отобразить изображение на холсте, необходимо загрузить его с помощью объекта Image JavaScript.
const img = new Image();
// Указываем путь к изображению
img.src = 'https://ik.imagekit.io/awilum/welcome-to-hawkins.jpg?updatedAt=1702540829891';После загрузки изображения источник изображения установлен, и мы можем использовать его для отображения на холсте с помощью метода drawImage() контекста рисования.
// Отображаем изображение на холсте в координатах (x, y)
ctx.drawImage(img, x, y);Метод drawImage() имеет несколько вариантов использования, позволяющих управлять размерами и масштабированием изображения.
Синтакcис:
drawImage(img, dx, dy);
drawImage(img, dx, dy, dWidth, dHeight);
drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);Параметры:
img |
Элемент для отображения в контексте. |
dx |
Координата по оси Х, обозначающая стартовую точку холста-приёмника, в которую будет помещён верхний левый угол исходного image. |
dy |
Координата по оси Y, обозначающая стартовую точку холста-приёмника, в которую будет помещён верхний левый угол исходного image. |
dWidth |
Ширина изображения, полученного из исходного image.Эта опция позволяет масштабировать изображение по ширине. Если опция не задана, изображение не будет масштабировано. |
dHeight |
Высота изображения, полученного из исходного image.Эта опция позволяет масштабировать изображение по высоте. Если опция не задана, изображение не будет масштабировано. |
sx |
Координата по оси X верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещён в контекст-приёмник. |
sy |
Координата по оси Y верхнего левого угла фрагмента, который будет вырезан из изображения-источника и помещён в контекст-приёмник. |
sWidth |
Ширина фрагмента, который будет вырезан из изображения источника |
sHeight |
Высота фрагмента, который будет вырезан из изображения источника и помещён в контекст-приёмник. |
Отображение изображения в его естественном размере:
ctx.drawImage(img, 0, 0);Результат:
Масштабирование изображения до определенной ширины и высоты:
// Изображение будет масштабировано до размеров 100x100 пикселей
ctx.drawImage(img, 0, 0, 100, 100);Результат:
Масштабирование изображения до размеров холста:
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);Результат:
onLoad()Метод onload объекта Image является обработчиком события, который вызывается, когда изображение загружено. Это очень важный момент при работе с изображениями в веб-разработке, потому что до момента загрузки изображения вы не можете гарантировать, что оно доступно для отображения или манипуляций.
Создаем новый объект Image и устанавливаем его src на путь к изображению. На этом этапе происходит начало загрузки изображения.
const img = new Image();
img.src = 'https://ik.imagekit.io/awilum/welcome-to-hawkins.jpg?updatedAt=1702540829891';После того как изображение полностью загружено, событие onload срабатывает, и код внутри обработчика выполняется.
img.onload = function() {
// В этом блоке кода можно выполнять действия с изображением,
// которые должны произойти после его загрузки.
ctx.drawImage(img, 0, 0);
console.log('Изображение загружено!');
};Гарантия доступности изображения.
Используя onload, вы убеждаетесь, что изображение загружено и доступно для использования, прежде чем пытаться отобразить его или выполнить другие операции с ним.
Избегание ошибок.
Без обработчика onload существует риск попытаться отобразить изображение, которое еще не загружено, что может привести к ошибкам.
Выполнение действий после загрузки.
Обработчик onload позволяет вам выполнить определенные действия только после того, как изображение загружено, например, установить его как фон холста или выполнить манипуляции с изображением.