Как реализовать масштабирование объектов на Canvas?

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

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

Как реализовать масштабирование объектов на Canvas?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от gage , 8 месяцев назад

@linnea 

Для масштабирования объектов на Canvas можно использовать методы transform и scale контекста рисования (context) в JavaScript. Ниже приведен пример кода, который увеличивает размер прямоугольника на 2 раза в ширину и высоту:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// Начало пути и создание прямоугольника
context.beginPath();
context.rect(20, 20, 50, 50);
context.fillStyle = "blue";
context.fill();

// Масштабирование объекта
context.scale(2, 2);

// Начало пути и создание прямоугольника после масштабирования
context.beginPath();
context.rect(20, 20, 50, 50);
context.fillStyle = "red";
context.fill();


В данном примере метод scale увеличивает размер объектов на коэффициент 2 в ширину и высоту. Также можно использовать другие методы для изменения положения объектов на Canvas, такие как translate, rotate, и skew.