Рисование прямых линий
Методические указания
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, который автоматически соединит текущее положение пера с начальным.