Рисование прямых линий
Для отрисовки прямых линий используется метод 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(); } Получим следующий результат:
Последнюю сторону пятиугольника можно было не отрисовывать методом lineTo, а вызвать метод closePath, который автоматически соединит текущее положение пера с начальным
|
