Тени в Canvas в QML

Путь можно визуально улучшить, используя тени с объектом 2D контекста. Тень – это область вокруг пути со смещением, цветом и заданным размытием. Для нее вы можете указать shadowColor, shadowOffsetX, shadowOffsetY и shadowBlur. Всё это должно быть определено с использованием 2D контекста. 2D контекст – это ваш единственный API для операций рисования.

Тень также можно использовать для создания эффекта свечения вокруг контура. В следующем примере мы создаем текст «Canvas» с белым свечением вокруг. Всё это выполнено на темном фоне для лучшей видимости.

Сначала рисуем темный фон:

// установливаем темный фон
ctx.strokeStyle = "#333"
ctx.fillRect(0,0,canvas.width,canvas.height);

Затем определяем конфигурацию нашей тени, которая будет использоваться для следующего пути:

// устанавливаем синюю тень
ctx.shadowColor = "#2ed5fa";
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 10;

Наконец, рисуем наш текст «Canvas», используя крупный полужирный шрифт размером 80 пикселей из семейства шрифтов Ubuntu.

// отображаем зеленый текст
ctx.font = 'bold 80px sans-serif';
ctx.fillStyle = "#24d12e";
ctx.fillText("Canvas!",30,180);

Теги