Canvas - Как нарисовать шестиугольник, но при этом вершина вверх и без поворота

Question

Мне нужно нарисовать шестиугольник, но вершина должна идти вверх. Я создал это, используя метод rotate из canvas, но теперь я должен сделать это без поворота. Мне нужно, чтобы путь шестиугольника был таким:

Вот как теперь выглядит мой путь шестиугольника:

let size = 21
let x = 70
let y = 60
let side = 0
			
path = new Path2D();
				
path.moveTo(x + size * Math.cos(0), y + size * Math.sin(0));

for (side; side < 7; side++) {
	path.lineTo(x + size * Math.cos(side * 2 * Math.PI / 6), y + size * Math.sin(side * 2 * Math.PI / 6));
}

Можно ли как-нибудь проложить путь для этого шестиугольника с вершиной вверх без использования метода поворота?

Answer 1

Этот метод не только дает вам пятиугольники, но и рисует любой многоугольник.

function polygon(x, y, N, r, color) { //x&y are positions, N is side number, r is size, color is to fill

ctx.beginPath();
  ctx.moveTo (x + r * Math.cos(0), y + r *  Math.sin(0));

  for (var i = 1; i <= N; i += 1) {
    ctx.lineTo (x + r * Math.cos(i * 2 * Math.PI / N), y + r * Math.sin(i * 2 * Math.PI / N));
}
//Below draws the shape
ctx.strokeStyle = color;
ctx.lineWidth = 1;
ctx.stroke();
ctx.save();
//Below fills the shape
ctx.fillStyle = color;
ctx.fill();
ctx.restore();
}

Вы можете убрать часть fill (), если вы просто хотите наброски, но если вам строго нужен пятиугольник, просто замените все экземпляры N на 5.