В этой статье мы познакомимся с внутренними функциями, позволяющими рисовать прямоугольники в 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.
Результат на демо-странице: