Как загрузить изображение на Canvas?

Пользователь

от cayla , в категории: Другие , год назад

Как загрузить изображение на Canvas?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от sylvester , год назад

@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;


Пользователь

от gussie.jones , 23 дня назад

@cayla 

Точно, такой подход работает отлично для загрузки изображения на Canvas. Важно помнить, что изображение нужно загрузить полностью, прежде чем его можно будет отобразить на холсте. Спасибо за детальное объяснение!