Path2D на canvas

Path2D объекты позволяют сохранять пути и воспроизводить их на холсте canvas по мере необходимости.

Конструктор Path2D() возвращает вновь созданный объект Path2D.

new Path2D();     // пустой path объект
new Path2D(path); // копирование из другого path
new Path2D(d);    // path из SVG

Пример 1. Варианты использования конструктора Path2D().

Все методы создания пути (path) применимы к объекту Path2D.

Метод	Описание	Параметры
addPath()	Добавляет путь к текущему пути с необязательной матрицей преобразования.	path, transform
closePath()	Рисует прямую линию от текущей точки к началу пути.
moveTo()	Перемещает начальную точку нового подпути к координатам.	x, y
lineTo()	Соединяет последнюю точку в пути с полученными координатами прямой линией.	x, y
bezierCurveTo()	Добавляет к пути кубическую кривую Безье.	cp1x, cp1y, cp2x, cp2y, x, y
quadraticCurveTo()	Добавляет к пути квадратичную кривую Безье.	cp1x, cp1y, x, y
arc()	Добавляет к пути дугу с центром, заданным координатами.	x, y, R, startAngle, endAngle, по/против часовой стрелки
arcTo()	Добавляет круговую дугу к траектории с заданными контрольными точками и радиусом, соединенную с предыдущей точкой прямой.	x, y, R
ellipse()	Добавляет эллиптическую дугу с центром, заданным координатами.	x, y, RX, RY, startAngle, endAngle, по/против часовой стрелки
rect()	Создает путь для прямоугольника.	x, y, width, height

Табл. 1.

<html>
	<head>
		<style>
			#canvas{
				background-color: darkkhaki;
			}
		</style>
		<script>
			function onLoadHandler() {
				var canvas = document.getElementById('canvas'),
				    context = canvas.getContext('2d'),
                    hexagram = new Path2D();
                var x=0, y=0;
                context.translate(50, 50);
                hexagram.moveTo(x, y);
                hexagram.lineTo(50, 0);
                hexagram.closePath();
                context.stroke(hexagram);
                context.rotate(Math.PI/3);
                context.stroke(hexagram);
                context.rotate(Math.PI*2/3);
                context.translate(-50, 0);
                context.rotate(Math.PI*5/3);
                context.stroke(hexagram);
			}
		</script>
	</head>
	<body onload = onLoadHandler()>
		<canvas id="canvas">Обновите браузер!</canvas>
	</body>
</html>

dgdf

Рис.

Литература:

Mozilla - Path2D объекты.

JavaScript