Для заливки цветом геометрических фигур на Canvas тип Context2D предоставляет ряд функций:
fill()
: заливает геометрический путь цветом
fillRect(real x, real y, real w, real h)
: заливает цветом прямоугольник
Например, закрасим руть в стандартный цвет:
import QtQuick Window { width: 250 height: 130 visible: true title: "METANIT.COM" Canvas { anchors.fill: parent onPaint: { const context = getContext("2d"); context.beginPath(); context.moveTo(125, 20); context.lineTo(230, 110); context.lineTo(20, 110); context.closePath(); context.fill(); context.stroke(); } } }
По умолчанию для заливки фигуры применяется черный цвет (далее посмотрим, как настроить цвет):
Заливка прямоугольной области:
Canvas { anchors.fill: parent onPaint: { const context = getContext("2d"); context.fillRect(20, 20, 110, 100); } }
При отрисовке Context2D применяет некоторые настройки по умолчанию, например, в качестве цвета применяется черный цвет. Однако с помощью ряда свойств типа Context2D можно настроить подобные настройки. Отмечу основные из них:
fillStyle: устанавливает цвет заполнения фигур
strokeStyle: устанавливает цвет контура фигур
lineWidth: толщина линий
shadowBlur: размытие тени
shadowColor: цвет тени
shadowOffsetX: смещение тени по оси Y
shadowOffsetY: смещение тени по оси Х
Применение некоторых свойств:
import QtQuick Window { width: 250 height: 130 visible: true title: "METANIT.COM" Canvas { anchors.fill: parent onPaint: { const context = getContext("2d"); context.fillStyle = "#7ed6df"; context.strokeStyle = "#22a6b3"; context.lineWidth = 2; context.beginPath(); context.moveTo(125, 20); context.lineTo(230, 110); context.lineTo(20, 110); context.closePath(); context.fill(); context.stroke(); } } }