Рисование простейших фигур

Начнем мы с самых простых операций — рисования различных прямоугольников, с заливкой и без нее.

Для рисования прямоугольника без заливки (т. е. одного лишь контура прямоугольника) предназначен метод strokeRect объекта CanvasRenderingContext2D:

<контекст рисования> .strokeRect(<горизонтальная координата>,<вертикальная координата>, <ширина>,<высота> )

Первые два параметра задают горизонтальную и вертикальную координаты верхнего левого угла рисуемого прямоугольника в пикселах в виде чисел. Третий и четвертый параметры задают, соответственно, ширину и высоту прямоугольника, также в пикселах и также в виде чисел. Метод strokeRect не возвращает результата.

Пример:

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

Метод fillRect рисует прямоугольник с заливкой:

<контекст рисования> .fillRect(<горизонтальная координата>,<вертикальная координата>, <ширина>,<высота> )

Как видим, формат его вызова такой же, как у метода strokeRect:

ctxCanvas.fillRect(40, 40, 320, 220);

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

<контекст рисования> .clearRect(<горизонтальная координата>,<вертикальная координата>, <ширина>,<высота> )

И его формат вызова схож с форматом вызова метода strokeRect.

Вот выражения, которые рисуют большой прямоугольник с заливкой, занимающий всю канву cnv, после чего создают в его середине прямоугольную "прореху":

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

ctxCanvas.clearRect(100, 100, 200, 100);

А это выражение очищает канву от всей присутствующей на ней графики:

ctxCanvas.clearRect(0, 0, 400, 300);