3

我有以下代码：

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

红线是我想要的角度，但黑线是我得到的角度（黑线及以上是我所能得到的，在黑线下我不能做任何旋转来获得想要的角度）。

请不要给我 CSS 代码，因为我使用的是 JavaScript 代码循环

4

1 回答 1

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一个位置相同，您的两行就不会中断。希望这可以帮助！

于 2013-06-08T01:45:22.090 回答