如何使用打字稿翻译画布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

我会尝试创建一个绘制六边形的函数，您不必使用翻译。

见下文

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) 和颜色
• 我们遍历六个顶点并画线
• 计算只是一点三角函数，没什么花哨的

有了它，我们可以在我们想要的任何位置绘制六边形。
并且您可以轻松重构相同的功能以绘制八边形或其他多边形。

---

这是这些六边形的动画版本

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>

如你所见，不需要使用翻译