我一直在绞尽脑汁解决这个问题。请问有什么方法可以将原点从左上角坐标更改为左下角坐标吗？下面是代码。请注意，我希望相对于左下坐标逆时针方向旋转最后一个矩形。
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();
}<!DOCTYPE html>
<html>
<head>
<title>Road</title>
</head>
<body>
<canvas id="DemoCanvas" width="300" height="400"></canvas>
</body>
</html>我想用这个方法来绘制一条高速公路路线。非常感谢任何帮助。请帮助我谢谢。
最佳答案
使用以下内容
ctx.translate(0, canvas.height);
ctx.scale(1, -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();
}<!DOCTYPE html>
<html>
<head>
<title>Road</title>
</head>
<body>
<canvas id="DemoCanvas" width="300" height="400"></canvas>
</body>
</html>关于javascript - 更改原点中心。 (Javascript)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47348716/