Листинг 17.1

Web-сценарий из листинга 17.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;