HTML5 за 10 минут

Рисование прямоугольников


Полые прямоугольники можно рисовать с помощью функции strokeRect, определяемой следующим образом. strokeRect(float х, float у, float w, float h);

А заполняемые прямоугольники рисуются помощью функции f illRect, определяемой следующим образом.

fillRect(float х, float у, float w, float h);

Обеим функциям в качестве аргументов передаются координаты (х, у) левого верхнего угла прямоугольника, а также его ширина и высота (w, h). Следует, однако, иметь в виду, что в элементе

управления Canvas левому верхнему углу виртуального полотна соответствуют координаты (0, 0), положительная ось координат х простирается справа налево, положительная ось координат у — сверху вниз, а в качестве единицы измерения используются пиксели (т.е. элементы изображения).

В данном примере мы рассмотрим применение функции f illRect для рисования заполняемых прямоугольников. Цвет их заполнения выбирается с помощью атрибута fillStyle. В этом атрибуте задается цвет, указываемый с помощью функции rgba (), которой в качестве аргументов передаются значения красной, зеленой и синей составляющих выбираемого цвета (в пределах 0-255), а также коэффициент видимости (в пределах 0-1, где

0    означает, что прямоугольник совершенно невидим, а 1 — прямоугольник полностью видим).

В частности, для установки стиля заполнения объекта canvas 1 синим цветом служит строка кода, приведенная ниже.

canvasl.fillStyle = "rgba(0, 0r 200, 1)";

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

1.   Откройте HTML-документ из файла canvas.html в избранном вами редакторе текста, например в Windows WordPad.

2.   Введите выделенный ниже полужирным код для рисования трех прямоугольников, заполняемых разным цветом.

<script type="text/javascript"> function loader()

{

var canvas = document.getElementByld (canvas); var canvasl = canvas.getContext(2d);

// Прямоугольники

canvasl.fillStyle = "rgba(0, 0, 200, 1)"; canvasl.fillRect(30, 30, 75, 70); canvasl.fillStyle = "rgba(200, 200, 0, 1)”; canvasl.fillRect(70, 50, 55, 70); canvasl.fillStyle = "rgba(200, 0, 0, 1)”; canvasl.fillRect(90, 50, 75, 50);

}

</script>

3.   Сохраните внесенные изменения в файле canvas.html. Сделайте это в текстовом формате.

Результаты загрузки HTML-документа из файла canvas, html в браузер приведены. Как видите, все три нарисованных прямоугольника перекрываются.

Комментарии закрыты