0
私はこの問題に頭を悩ましています。原点を左上の座標から左下の座標に変更する方法はありますか？以下はコードです。最後の矩形を左下の座標に対して反時計回りに回転させたいことに注意してください。原点を変更する。 （Javascript）
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）;問題を解決しますか？ –
こんにちはCK R、お返事いただきありがとうございます。実際はそうではありませんが、あなたは私の問題を解決するための新しいアイデアを与えてくれます。とにかく、問題は解決しました。ありがとう。 – cypatrick
ありがとうございます。役に立ったなら、私の答えをupvoteしてください。ありがとう。 –