3

私は次のコードを持っています：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(130, 0);
ctx.lineTo(130, 150);
ctx.stroke();

ピクセルと描画/線の回転を少し混乱させました。説明させてください、私は通常のキャンバス コードを持っていますが、回転が正しく機能していません。数字で少し遊んでみましたが、270 回転ではなく 180 回転しかできないため、必要な角度を取得できません (多かれ少なかれ)。

ここに私が欲しいものを説明するための画像があります:

http://img689.imageshack.us/img689/1996/13648488297821.jpg

赤い線は私が望む角度ですが、黒い線は私が得る角度です（黒い角度以上は私が得ることができるすべてであり、黒い線の下では必要な角度を得るために回転することはできません）。

JavaScriptコードループを使用しているため、CSSコードを提供しないでください

4

1 に答える 1

1

このコードを思いついた場所からの参照は、こことここにあります。線を分割して 2 つに分割すると、はるかに簡単です。例えば...

ctx.beginPath();
//edit the x or y to change starting point.
ctx.moveTo(50, 100);
//edit the x to change the length, and y for the angle.
//if you want a horizontal line this y must be the same as the moveto y.
ctx.lineTo(150, 100);

//This x & y must be the same as the previous lineto.
ctx.moveTo(150, 100);
//edit the x to change the length, and y for the angle.
ctx.lineTo(200, 130);
ctx.stroke();

メソッドは (x,y) を取ることに注意してください。最初lineToと次moveToが同じ位置にある限り、2 つの行が途切れることはありません。お役に立てれば！

于 2013-06-08T01:45:22.090 に答える