Використання перетворень

Існує три типи перетворень (масштабування, обертання і переклад)

1. У папці HTML5_05lessons, відкрийте 05_usingtransforms.HTML-файл і збережіть копію файлу 05_usingtransforms_work.html. Файл має п'ять прямокутників, проведених через полотно.

2. Відкрийте браузер і перегляньте HTML-сторінку, щоб побачити прямокутники.

Рисунок 24 – П'ять прямокутників

3. Після Rectangle додайте наступні рядки коду, як показано тут:

//rectangle1

  ctx.fillRect(30, 120, 40, 40);

ctx.translate(0, 20);

//rectangle2

  ctx.fillRect(80, 120, 40, 40);

Результатом виконання наступного коду є зміщення прямокутника, де х є зміщенням, а другий параметр – зсув.

4. Збережіть HTML-файл, а потім переключіться в браузер і перегляньте HTML-сторінку.

Рисунок 25 – Останні чотири прямокутники зміщені вниз по осі ординат

5. Ви зможете побачити, що як тільки встановлено переклад, перетворення застосовується до всіх малювання інструкції після нього. Після Rectangle1, додайте наступні рядки:

/ / Rectangle1

ctx.fillRect (30, 120, 40, 40);

ctx.save ();

ctx.translate (0, 20);

Додайте наступні рядки:

/ / Rectangle4

ctx.fillRect (180, 120, 40, 40);

ctx.restore ();

/ / Rectangle5

ctx.fillRect (230, 120, 40, 40);

6. Збережіть HTML-файл, а потім переключіться в браузер і перегляньте HTML-сторінку, що відображає ваші зміни.

Рисунок 26 – Тільки три середні прямокутники відсунуті вниз по осі ординат

7. При повернення в текстовий редактор, додайте наступні рядки:

ctx.save ();

ctx.rotate (0.19);

8. Збережіть HTML-файл, а потім переключіться в браузер і перегляньте HTML-сторінку, що відображає ваші зміни.

Рисунок 27 – Останні чотири прямокутники зміщуються вниз, а другий і третій повертається

9. Додайте наступний рядок:

ctx.restore ();

10. Збережіть HTML-файл, а потім переключіться в браузер і перегляньте HTML-сторінку, що відображає ваші зміни.

Рисунок 28 – Три прямокутники зміщуються вниз і один обертається

 

11. Після того, додайте наступний рядок:

ctx.scale (0.5, 0.7);

12. Збережіть HTML-файл, а потім переключіться в браузер і перегляньте HTML-сторінку, що відображає ваші зміни.

Рисунок 29 – Три прямокутники зміщуються вниз, один обертається, і один масштабується