javascript - Canvas 像素错误

Question

我有以下代码:

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

我有点搞砸了像素和旋转绘图/线条。让我解释一下，我有正常的 Canvas 代码，但旋转无法正常工作。我试过玩一些数字，但我仍然无法获得我想要的 Angular ，因为我只能进行 180 度旋转而不是 270 度(或多或少)。

这是一张图片来解释我想要什么:

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

红线是我想要的 Angular ，黑线是我得到的 Angular (黑线及以上是我能得到的，在黑线下我不能做任何旋转来得到想要的 Angular )。

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

Answer 1

可以找到我提出此代码的引用资料 here , 和 here .如果你把这条线分开，一条一条地分成两条，那就容易多了。例如……

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 位置相同，您的两个就不会中断线。希望这对您有所帮助!