Составные фигуры состоят из нескольких соединенных простых объектов (таких как линии, круги и т.д.)
| Методы
| Описание
|
| moveTo(x,y)
| Устанавливает координаты точки, из которой начнется рисование следующего объекта.
|
| lineTo(x,y)
| Рисует прямую линию.
|
| arc(x,y,радиус,нач_угол,конеч_угол)
| Рисует круг. Угол необходимо задавать в радианах, а не в градусах (радианы=(Math.PI/180)*градусы).
|
| rect(x, y, ширина, высота)
| Рисует прямоугольник.
|
Код программы рисования заключается в «логические скобки» состоящие из функцийbeginPath(); иclosePath();
Структура программы выглядит следующим образом
beginPath(); //Начало рисования/* Простые объекты помещаются здесь */closePath(); // Автоматически завершает фигуру (соединяет конечную точку с начальной) //Теперь необходимо вызвать один из методов для рисования фигуры определенной вышеstroke(); //нарисует фигуру не закрашеннойfill(); //нарисует фигуру закрашенной
Пример рисования треугольника
<html>
<body>
<canvas id='draw' style='border:1px solid' width='300' height='200'></canvas>
<script type='text/javascript'>
var canvas=document.getElementById("draw")
var x=canvas.getContext("2d");
X.beginPath(); //Начало рисования
X.moveTo(20,20);// координаты точки, из которой начнется рисование
X.lineTo(70,70); // Рисует прямую линию.
x.lineTo(20,70);
