Комментарий: мы можем использовать «путь», чтобы нарисовать любой график. Путь - это просто серия точек и линий, соединяющих эти точки. Любой контекст холста будет иметь только один «текущий путь», и когда будет вызван контекст. Ssave (), «текущий путь» не будет сохранен
Оригинал:? P = 371
Эта статья переведена с Canvas Steve Fulton & Jeff Fulton HTML5, глава 2, используя пути для создания строк
Для холста HTML5 мы можем использовать пути для рисования любого графика. Путь - это просто серия точек и линий, соединяющих эти точки. В любом контексте холста будет только один текущий путь, и когда будет вызван контекст. Ssave (), текущий путь не будет сохранен.
Начало и конец пути
Вызов starmpath () может начать путь, в то время как вызов ClosePath () завершит путь. Если вы подключите точку в пути, то это соединение образует подвижность. Если последняя точка в подвижности подключена к его первой точке, мы считаем, что подвиган закрыт.
Линейный рисунок
Самая основная операция пути состоит из повторяющихся вызовов в командах moveto () и lineto (). Например, следующий пример:
функция DrawScreen () {
context.strokestyle = "черный";
Context.linewidth = 10;
context.linecap = 'square';
context.beginpath ();
context.moveto (20, 0);
context.lineto (100, 0);
Context.Stroke ();
context.closepath ();
}
В приведенном выше примере мы изображаем горизонтальный сегмент линии шириной 10 пикселей; В то же время мы также устанавливаем свойства LineCap и Strokestyle. Вот список некоторых часто используемых свойств:
LineCap
LineCap определяет стиль на обоих концах сегмента линии в холсте и может быть установлен на одно из следующих трех значений:
приклад Значение по умолчанию; Добавьте прямые края на обоих концах сегмента линии.
круглый. Добавьте полукруглую линию на каждом конце сегмента линии. Диаметр линейной крышки равен ширине сегмента линии.
квадрат. Добавьте квадратные крышки к обоим концам сегмента линии. Длина линейной крышки равна ширине сегмента линии.
Linejoin
Linejoin определяет угловой шаблон на пересечении двух сегментов линии. Ниже приведены три дополнительных значения:
митра. По умолчанию; Создает острый угол. Вы можете ограничить длину острых углов, установив свойство Mitherlimit - MitterLimit - это максимальное соотношение резкой длины угла и ширины линии, а по умолчанию составляет 10.
скос. Создать скос.
круглый. Создайте округлый угол.
ширина линии
Включить линию определяет толщину линии, а по умолчанию составляет 1,0.
Strokestyle
Strokestyle определяет такие стили, как цвета, используемые для рендеринга.
Примечание переводчика: когда Linejoin установлен на Miter, но острый угловой длина превышает предел Miterlimit, Canvas будет отображать эффект углового кончика.