Листинг 22.1

ctxCanvas.strokeStyle = "rgba(255, 0, 0, 1)";

ctxCanvas.fillStyle = "rgba(255, 0, 0, 1)";

ctxCanvas.fillRect(0, 100, 400, 100);

ctxCanvas.strokeStyle = "rgba(0, 255, 0, 0.5)";

ctxCanvas.fillStyle = "rgba(0, 255, 0, 0.5)";

ctxCanvas.fillRect(100, 0, 200, 300);

Web-сценарий из листинга 22.1 рисует прямоугольник с заливкой, используя и для контура, и для заливки непрозрачный красный цвет, после чего поверх него рисует прямоугольник с заливкой, но уже полупрозрачным зеленым цветом. При этом сквозь полупрозрачный второй прямоугольник будет просвечивать непрозрачный первый. Интересный эффект, кстати!

ВНИМАНИЕ!

Нельзя присваивать значение свойства strokeStyle свойству fillStyle и наоборот. Это вызовет ошибку в Web-сценарии.

Свойство lineWidth задает толщину линий в пикселах в виде числа.

Пример:

ctxCanvas.lineWidth = 20;

ctxCanvas.strokeRect(20, 20, 360, 260);

Этот Web-сценарий рисует прямоугольник без заливки линиями толщиной 20 пикселов.

Свойство globalAlpha, возможно, также нам пригодится. Оно позволяет задать уровень прозрачности для любой графики, которую мы впоследствии нарисуем. Уровень прозрачности также задается в виде числа от 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный).

Вот выражение, задающее для всей графики, которую мы потом нарисуем на канве, уровень прозрачности 10 %:

ctxCanvas.globalAlpha = 0.1;