Теги: canvas, clearRect, strokeRect, fillRect
У цій статті ми познайомимося з внутрішніми функціями, що дозволяють малювати прямокутники в canvas.
На відміну від SVG. canvas підтримує тільки примітивні фігури, наприклад, прямокутники. Всі інші фігури можуть бути створені за допомогою різних комбінацій прямокутників і ліній. Для малювання прямокутників використовуються три функції, про які й піде мова далі.
Для всіх прикладів використовується наступна HTML -Структура файлу:
Canvas - fillRect (x, y, width, height)
Малює зафарбований прямокутник. x і y тут координати верхнього лівого кута, а width і height - ширина і висота прямокутника. Розглянемо простий приклад:
Результат на демо-сторінці:
Canvas - strokeRect (x, y, width, height)
Малює порожній прямокутник (тільки його межі). x і y тут координати верхнього лівого кута, а width і height - ширина і висота прямокутника. Розглянемо простий приклад:
Результат на демо-сторінці:
Canvas - clearRect (x, y, width, height)
Очищає виділену прямокутну область до кольору фону. x і y тут координати верхнього лівого кута, а width і height - ширина і висота прямокутника. Розглянемо простий приклад:
У цьому прикладі ми спочатку малюємо залитий прямокутник, щоб побачити ефект від функції clearRect.
Результат на демо-сторінці: