Рисование прямых линий

Методические указания

1. При изучении конструкций языка HTML5 можно использовать любой текстовый редактор. Для получения HTML 5файла, сохраняйте свои изменения как текстовые, для файла используйте расширение *.htm или *.html.

2. Более опытные пользователи могут воспользоваться любым специализированным редактором HTML страниц (Macromedia Dreamweaver, HomeSite, FrontPage, AceHTML, Web Development Studio)

3. Создаваемые файлы необходимо тестировать в основных браузерах Internet Explorer, Mazilla Firefox, Opera.

4. Отлаженные файлы необходимо сохранять в отдельном каталоге.

5. По окончанию работы сохраните все созданные файлы на своих носителях.

Теоретические сведения

Работа с положением пера

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

Изначально, сразу после загрузки Web-страницы и вывода canvas, перо находится в точке с координатами [0,0], т. е. в верхнем левом углу канвы. Переместить перо в другую точку canvas, можно методом moveTo.

Метод moveTo принимает два параметра moveTo(x,y), соответственно определяющих координаты положения пера по горизонтали и вертикали.

Выражение ctxCanvas.moveTo(10, 30) переместит перо в точку с координатами [10,30].

Рисование прямых линий

Для отрисовки прямых линий используется метод lineTo(x,y), рисующий прямую линию от координат положения пера до указанных в качестве параметров значений x и y.

После рисования прямой линии перо будет установлено в ее конечной точке. Мы можем прямо из этой точки начать рисование следующей линии контура.

Для указания начала отрисовки контура сложной фигуры используется метод beginPath, соответственно при окончании отрисовки фигуры – stroke.

Рассмотрим на следующем примере, по отрисовке пятиугольника:

function createImage()

{

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

ctx.beginPath();

ctx.moveTo(0,100);

ctx.lineTo(100,0);

ctx.lineTo(200,100);

ctx.lineTo(150,200);

ctx.lineTo(50,200);

ctx.lineTo(0,100);

ctx.stroke();

}

Получим следующий результат:

Рис. 7.1. Пример отрисовки контура сложной фигуры

Последнюю сторону пятиугольника можно было не отрисовывать методом lineTo, а вызвать метод closePath, который автоматически соединит текущее положение пера с начальным.