Как нарисовать изображение на Canvas?

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

от gage , в категории: Другие , 10 месяцев назад

Как нарисовать изображение на Canvas?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от alisa.bahringer , 10 месяцев назад

@gage 

Для того чтобы нарисовать изображение на Canvas необходимо выполнить следующие шаги:

  1. Создать объект Canvas, указав его ширину и высоту:
1
2
3
4
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;


  1. Загрузить изображение с помощью объекта Image и указать его путь:
1
2
var img = new Image();
img.src = "image.png";


  1. Дождаться загрузки изображения и нарисовать его на Canvas:
1
2
3
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};


Это пример кода для отображения изображения на Canvas. Есть и другие способы, например, можно нарисовать изображение напрямую на Canvas с помощью метода ctx.fillRect(), используя данные пикселей изображения.