Как загрузить изображение на Canvas?
1 ответ
от
sylvester ,
10 месяцев назад
@cayla
Для загрузки изображения на Canvas нужно использовать метод drawImage() контекста рисования (CanvasRenderingContext2D).
Пример:
1 2 3 4 5 6 7 8 9 |
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const img = new Image(); img.onload = function() { // когда изображение загрузится, оно будет нарисовано на Canvas ctx.drawImage(img, 0, 0); }; img.src = 'path/to/image.png'; // путь к изображению |
В этом примере мы создаем новый объект Image, указываем путь к изображению в его свойстве src, и ждем пока оно загрузится через обработчик события onload. Когда изображение загрузится, метод drawImage() нарисует его на Canvas. Первый аргумент метода drawImage() - это объект Image, а второй и третий аргументы - координаты x и y, где будет отрисовано изображение на Canvas.
Также можно загрузить изображение как объект Image заранее и использовать его в нужный момент:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const img = new Image(); img.src = 'path/to/image.png'; // путь к изображению // функция, которая использует объект Image для отрисовки его на Canvas function drawImage() { ctx.drawImage(img, 0, 0); } // вызываем функцию, когда изображение загрузится img.onload = drawImage; |
15