Question

如果我在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();

因此，您不会看到正常的三角形，而是会看到一个有点倾斜的三角形。

提前致谢！

Answer 1

您可以使用 rotate canvas

方法完成此操作

＆＃13;

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var deg = 30;

ctx.save(); // save canvas

ctx.rotate(deg * Math.PI / 180); // rotate canvas

ctx.beginPath();
ctx.moveTo(5,0);
ctx.lineTo(10,10);
ctx.lineTo(0,10);
ctx.lineTo(5,0);
ctx.stroke();

ctx.restore(); // restore canvas

＆＃13;

<canvas id="canvas" width="218" height="218" style="border:1px solid #d3d3d3"></canvas>

＆＃13;

注意： 确保在旋转之前保存画布状态，并在绘制三角形后恢复它，以便将来的绘图不会得到转动。

Answer 2

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

因此，将三角形定义为其自身坐标系中的一组点，其中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();
}

现在是一个设置转换的函数

function setPosScaleRotation(x,y,scale,rot){
     ctx.setTransform(scale,0,0,scale,x,y);
     ctx.rotate(rot);
}
// and a function to restore the default transform
function restoreDefaultTransform(){
     ctx.setTransform(1,0,0,1,0,0);
}

现在很容易在你想要的地方画出

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();
}

然后

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

JS画布中的ctx旋转线

2 个答案: