Question

我一直在解决这个问题。我可以知道有没有办法改变从左上角坐标到左下角坐标的原点？下面是代码。请注意，我希望相对于左下角坐标沿逆时针方向旋转最后一个矩形。

＆＃13;

var canvas = document.getElementById("DemoCanvas");
if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    for (i = 0; i < 500; i += 50) {
        ctx.moveTo(0, i);
        ctx.strokeStyle = "#E8D8D8";
        ctx.lineTo(canvas.width, i);
        ctx.stroke();

    }
    for (i = 0; i < 511; i += 50) {
        ctx.moveTo(i, 0);
        ctx.strokeStyle = "#E8D8D8";
        ctx.lineTo(i, canvas.height);
        ctx.stroke();
    }
    // Save the unrotated context of the canvas.   
    ctx.save();
    ctx.fillStyle = "#ff0000";
    ctx.fillRect(2, 5, 100, 150);
    //Move to the center of the canvas to (50,10) point.   
    ctx.translate(100, 5);
    // Rotate the canvas by 30 degrees.
    ctx.rotate((Math.PI / 180) * 30);
    ctx.fillStyle = "#ff0000";
    // Draw another rectangle
    ctx.fillRect(0, 0, 100, 150);

    ctx.translate(100, 0);
    // Rotate the canvas by 30 degrees.
    ctx.rotate((Math.PI / 180) * 30);
    ctx.fillStyle = "#ff0000";
    // Draw another rectangle
    ctx.fillRect(0, 0, 100, 150);
    // Restore the unrotated context   

    ctx.translate(100, 0);
    ctx.rotate((Math.PI / 180) * -30);
    ctx.fillStyle = "#ff0000";
    // Draw another rectangle
    ctx.fillRect(0, 0, 100, 150);

    ctx.restore();

}

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <title>Road</title>
</head>

<body>
    <canvas id="DemoCanvas" width="300" height="400"></canvas>
</body>

</html>

＆＃13;

我希望用这种方法画出一条高速公路。任何帮助都非常感谢。请帮助我。

Answer 1

使用以下

    var canvas = document.getElementById("DemoCanvas");
    if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    for (i = 0; i < 500; i += 50) {
        ctx.moveTo(0, i);
        ctx.strokeStyle = "#E8D8D8";
        ctx.lineTo(canvas.width, i);
        ctx.stroke();         
    }
    
    for (i = 0; i < 511; i += 50) {
        ctx.moveTo(i, 0);
        ctx.strokeStyle = "#E8D8D8";
        ctx.lineTo(i, canvas.height);
        ctx.stroke();
    }

    // Save the unrotated context of the canvas.   
    ctx.save();
    ctx.translate(0, canvas.height);
    ctx.scale(1, -1);
    ctx.fillStyle = "#ff0000";
    ctx.fillRect(2, 5, 100, 150);
    
    //Move to the center of the canvas to (50,10) point.   
    ctx.translate(100, 5);
    // Rotate the canvas by 30 degrees.
    ctx.rotate((Math.PI / 180) * 30);
    ctx.fillStyle = "#ff0000";
    // Draw another rectangle
    ctx.fillRect(0, 0, 100, 150);

    ctx.translate(100, 0);
    // Rotate the canvas by 30 degrees.
    ctx.rotate((Math.PI / 180) * 30);
    ctx.fillStyle = "#ff0000";
    // Draw another rectangle
    ctx.fillRect(0, 0, 100, 150);
    // Restore the unrotated context   

    ctx.translate(100, 0);
    ctx.rotate((Math.PI / 180) * -30);
    ctx.fillStyle = "#ff0000";
    // Draw another rectangle
    ctx.fillRect(0, 0, 100, 150);

    ctx.restore();    
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <title>Road</title>
</head>

<body>
    <canvas id="DemoCanvas" width="300" height="400"></canvas>
</body>

</html>

＆＃13;

Map

＆＃13;

更改原点中心。（JavaScript）的

1 个答案:

更改原点中心。 （JavaScript）的

1 个答案:

更改原点中心。（JavaScript）的