Студопедия — Прямоугольники
Студопедия Главная Случайная страница Обратная связь

Разделы: Автомобили Астрономия Биология География Дом и сад Другие языки Другое Информатика История Культура Литература Логика Математика Медицина Металлургия Механика Образование Охрана труда Педагогика Политика Право Психология Религия Риторика Социология Спорт Строительство Технология Туризм Физика Философия Финансы Химия Черчение Экология Экономика Электроника

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






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

Для иллюстрации примеров лекции, создадим HTML – файл, для простоты разместим JavaScript код в рамках самой страницы:

<html> <head> <script type="application/x-javascript"> function createImage() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); } </script> </head> <body onload="createImage();"> <canvas id="canvas" style="border: 2px solid black" width="200" height="200"> </canvas> </body></html>

Функция createImage вызывается при загрузке тела html – документа. В рамках самой функции мы получаем ссылку на сам холст (canvas) и ссылку на контекст (ctx).

Рассмотрим подробнее метод и его параметры:

strokeRect (x,y,w,h)

x и y – координаты верхней левой вершины прямоугольника (по горизонтали и вертикали соответственно);

w и h – ширина и высота прямоугольника соответственно.

Метод fillRect принимает те же параметры, что и strokeRect.

Изменим функцию createImage следующим образом, для отрисовки двух квадратов:

function createImage() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.strokeRect(20,20,50,50); ctx.fillRect(80, 80, 50, 50); }

В результате, получим холст:


Рис. 23.2. Пример отрисовки прямоугольников

Метод clearRect, принимающий те же параметры, что fillRect и strokeRect, позволяет очистить прямоугольную область. Добавим следующую строку в метод createImage:

ctx.clearRect(50,50,50,50);

В результате холст изменится таким образом:


Рис. 23.3. Пример очистки прямоугольной области холста







Дата добавления: 2015-09-07; просмотров: 304. Нарушение авторских прав; Мы поможем в написании вашей работы!



Функция спроса населения на данный товар Функция спроса населения на данный товар: Qd=7-Р. Функция предложения: Qs= -5+2Р,где...

Аальтернативная стоимость. Кривая производственных возможностей В экономике Буридании есть 100 ед. труда с производительностью 4 м ткани или 2 кг мяса...

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

Расчетные и графические задания Равновесный объем - это объем, определяемый равенством спроса и предложения...

Основные разделы работы участкового врача-педиатра Ведущей фигурой в организации внебольничной помощи детям является участковый врач-педиатр детской городской поликлиники...

Ученые, внесшие большой вклад в развитие науки биологии Краткая история развития биологии. Чарльз Дарвин (1809 -1882)- основной труд « О происхождении видов путем естественного отбора или Сохранение благоприятствующих пород в борьбе за жизнь»...

Этапы трансляции и их характеристика Трансляция (от лат. translatio — перевод) — процесс синтеза белка из аминокислот на матрице информационной (матричной) РНК (иРНК...

Тема 2: Анатомо-топографическое строение полостей зубов верхней и нижней челюстей. Полость зуба — это сложная система разветвлений, имеющая разнообразную конфигурацию...

Виды и жанры театрализованных представлений   Проживание бронируется и оплачивается слушателями самостоятельно...

Что происходит при встрече с близнецовым пламенем   Если встреча с родственной душой может произойти достаточно спокойно – то встреча с близнецовым пламенем всегда подобна вспышке...

Studopedia.info - Студопедия - 2014-2024 год . (0.012 сек.) русская версия | украинская версия