围绕真实中心旋转三角形？

Question

我创建了以下绘制函数：

function draw(ctx, scale, angle) {
    // DRAW SHAPE:
    var rotation = (Math.PI / 180) * angle;
    var h = scale * (Math.sqrt(3) / 2);
    var radius = h / 4;
    ctx.fillStyle = '#BE1942';
    ctx.strokeStyle = "#FF2159";
    ctx.lineJoin = "round";
    ctx.lineWidth = radius;
    ctx.save();
    ctx.translate(getCX(), getCY());
    ctx.rotate(rotation);
    ctx.beginPath();
    ctx.moveTo(0, -h / 2);
    ctx.lineTo(-scale / 2, h / 2);
    ctx.lineTo(scale / 2, h / 2);
    ctx.lineTo(0, -h / 2);
    ctx.closePath();
    ctx.stroke();
    ctx.fill();

    // RESET:
    ctx.restore();

    // FINALIZE:
    ctx.save();
}

我注意到当我旋转这个三角形时，它并没有围绕真正的中心旋转，而是以一定的偏移量旋转。有没有简单的方法让它绕着真正的中心旋转？我认为它应该已经这样做了，因为我是从中心坐标绘制的。

Answer 1

你的 x,y 加起来不是 0,0，而是 (0, h/2)

ctx.moveTo(0, -h / 2);
ctx.lineTo(-scale / 2, h / 2);
ctx.lineTo(scale / 2, h / 2);

所以修改你的翻译，或者说

ctx.moveTo(0, -2*h / 3);
ctx.lineTo(-scale / 2, h / 3);
ctx.lineTo(scale / 2, h / 3);
ctx.lineTo(0, -2*h / 3);

围绕真实中心旋转三角形？

Rotating Triangle around True centre?

javascript

html5-canvas