Javascript JS画布中ctx的旋转线

如果我在JavaScript画布中绘制了以下三角形的基本图形，我将如何沿中心旋转它，比如说30度？这与可能的复制有点不同，因为它不是一个

rect

，而是沿着原点的一组线

// Rotate 30 degrees when origin is (5,5)
ctx.beginPath();
ctx.moveTo(5,0);
ctx.lineTo(10,10);
ctx.lineTo(0,10);
ctx.lineTo(5,0);
ctx.stroke();

所以，你会看到一个稍微倾斜的三角形，而不是一个正常的三角形

---

提前谢谢

您可以使用canvas的方法来实现这一点

var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
var-deg=30；
ctx.save（）；//保存画布
ctx.旋转（度*数学PI/180）；//旋转画布
ctx.beginPath（）；
ctx.moveTo（5,0）；
ctx.lineTo（10,10）；
ctx.lineTo（0,10）；
ctx.lineTo（5,0）；
ctx.stroke（）；
ctx.restore（）；//还原画布

---

最好的选择是在自己的局部坐标系中定义三角形。按原样，如果您计划移动它，则需要在画布周围跟随它的原点。但是你不需要改变三角形，只需要改变它的位置和旋转

// you had
/*
ctx.moveTo(5,0);
ctx.lineTo(10,10);
ctx.lineTo(0,10);
ctx.lineTo(5,0); */

// subtracting 5 from x and y to give
var triangle = [0,-5,5,5,-5,5];  // dont need the last point will use closePath

因此，将三角形定义为其自身坐标系中的一组点，其中0,0是旋转中心

// you had
/*
ctx.moveTo(5,0);
ctx.lineTo(10,10);
ctx.lineTo(0,10);
ctx.lineTo(5,0); */

// subtracting 5 from x and y to give
var triangle = [0,-5,5,5,-5,5];  // dont need the last point will use closePath

从一组点绘制形状的函数使生活变得更简单

function drawShape(shape, close){
    var i = 0;
    ctx.beginPath();
    ctx.moveTo(shape[i++], shape[i++]);
    while(i < shape.length){
        ctx.lineTo(shape[i++], shape[i++]);
    }
    if(close){ ctx.closePath() }
    ctx.stroke();
}

现在很容易画出你想要的形状

setPosScaleRotation(5,5,1,deg * Math.PI / 180); // 30Pi / 180 = 3Pi/18 = Pi/6 
drawShape(triangle,true);

或者将变换和绘图放在同一个函数中

function drawShape(shape, close, x, y, scale, rot){
    var i = 0;
    ctx.setTransform(scale, 0, 0, scale, x, y);
    ctx.rotate(rot);
    ctx.beginPath();
    ctx.moveTo(shape[i++], shape[i++]);
    while(i < shape.length){
        ctx.lineTo(shape[i++], shape[i++]);
    }
    if(close){ ctx.closePath() }
    ctx.stroke();
}

---

可能的副本您将不得不添加ctx.translate（5,5），然后这将work@AssafiCohen-阿拉齐：不管怎么说，这确实有效，如果你想改变位置，那么你需要翻译

drawShape(triangle, true, 5, 5, 1, Math.PI /6); 
drawShape(triangle, true, 100, 100,1, Math.PI + Math.PI / 6); // draw at 100,100 at 180 from other triangle