畫布像素錯誤

Question

我有以下代碼：

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

我有點搞砸像素並旋轉畫線/線條。 讓我解釋一下，我有普通的畫布代碼，但旋轉不能正常工作。 我嘗試過玩一些數字，但我仍然無法得到我想要的角度，因為我只能做180轉而不是270（或多或少）。

這是一張圖片來解釋我想要的東西：

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

紅線是我想要的角度，但黑線是我得到的角度（黑色角度和上面是我能得到的，在黑線下我不能做任何旋轉來獲得想要的角度）。

因為我正在使用JavaScript代碼循環，所以請不要給我CSS代碼

Answer 1

從我想出這個代碼中的引用可以被發現這里和這里 。 如果你將線分開並將其一個接一個地分成兩行，就會容易得多。 例如...

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是相同的位置，你會不會在你的兩條線路中斷。 希望這可以幫助！