Как перевести шестиугольник в канву html, используя машинопись

Question

Я нарисовал шестиугольник на холсте в html, и я хочу перераспределить шестиугольник на холсте, когда я использую метод перевода, он не переводит шестиугольник, но когда я переводю, он переводит, когда я использую прямоугольник.

var canvas: HTMLCanvasElement = document.getElementById ("myCanvas"); var context: CanvasRenderingContext2D = canvas.getContext ("2d");

var x  =  300;
var y =  100;

context.beginPath();
context.moveTo(x, y);
x = x + 120;
y = y + 100;
context.lineTo(x, y);  

y = y + 120;
context.lineTo(x, y); 

x = x - 125;
y = y + 100;
context.lineTo(x, y); 

x = x - 125;
y = y - 100;
context.lineTo(x, y); 

y = y - 120;
context.lineTo(x, y); 

x = x + 130;
y = y - 100;
context.lineTo(x, y);
context.strokeStyle = "red";
context.lineWidth = 4;  
context.fillStyle = "blue";
context.fill(); 

context.translate(400,400);
context.fillStyle = "blue";
context.fill(); 
context.save(); 

context.fillRect(10, 10, 100, 50);
    context.translate(70, 70);
    context.fillRect(10, 10, 100, 50);

Изменить 1: в соответствии с @helder дал ответ, который я внес изменения, но перевод не рабочая

function hexagon(x:number, y:number, r:number, color:string) {
  context.beginPath();
  var angle = 0
  for (var j = 0; j < 6; j++) {
    var a = angle * Math.PI / 180
    var xd = r * Math.sin(a)
    var yd = r * Math.cos(a)
    context.lineTo(x + xd, y + yd);
    angle += 360 / 6
  }
  context.fillStyle = color;
  context.fill();
  context.translate(70,70);
  context.fill();
}

hexagon(100, 100, 50, "red")

Answer 1

Я бы попытался создать функцию, которая будет использовать aws шестигранник, чтобы вам не приходилось использовать translate.

См. Ниже

c = document.getElementById("canvas");
context = c.getContext("2d");

function hexagon(x, y, r, color) {
  context.beginPath();
  var angle = 0
  for (var j = 0; j < 6; j++) {
    var a = angle * Math.PI / 180
    var xd = r * Math.sin(a)
    var yd = r * Math.cos(a)
    context.lineTo(x + xd, y + yd);
    angle += 360 / 6
  }
  context.fillStyle = color;
  context.fill();
}

hexagon(50, 50, 30, "red")
hexagon(40, 40, 10, "blue")
hexagon(60, 60, 10, "lime")

<canvas id=canvas >

Вот разбивка function hexagon(x, y, r, color)

• , она принимает центр шестиугольника (x,y) в радиусе (r) и цвет
• мы l oop по шести вершинам и рисуем линии
• расчеты - всего лишь тригонометрия, ничего особенного

При этом мы можем рисовать шестиугольники в любом желаемом месте.
и ту же функцию вы можете легко изменить, чтобы нарисовать восьмиугольник или другие многоугольники.

---

Анимированная версия этих шестиугольников

c = document.getElementById("canvas");
context = c.getContext("2d");
delta = 0

function hexagon(x, y, r, color) {
  context.beginPath();
  var angle = 0
  for (var j = 0; j < 6; j++) {
    var a = angle * Math.PI / 180
    var xd = r * Math.sin(a)
    var yd = r * Math.cos(a)
    context.lineTo(x + xd, y + yd);
    angle += 360 / 6
  }
  context.fillStyle = color;
  context.fill();
}

function draw() {
  context.clearRect(0, 0, c.width, c.height)
  var xd = 10 * Math.sin(delta)
  var yd = 10 * Math.cos(delta)
  hexagon(50 - xd, 50 - yd, 30, "red")
  hexagon(40 + xd, 40 + yd, 10, "blue")
  delta += 0.2
}

setInterval(draw, 100);

<canvas id=canvas>

Как видите, нет необходимости использовать перевод