画布像素错误

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

红线是我想要的角度，但黑线是我得到的角度（只能获得黑色角度及以上，低于黑线无法旋转以获得所需角度）。请不要提供CSS代码，因为我正在使用JavaScript代码循环。

- ExCluSiv3

---

你能调试一下吗？我真的不太明白这个问题。 - jeremy

请包含您正在使用的旋转代码，否则很难弄清楚问题所在。目前我只看到了绘制线条的代码。 - Flambino

jsfiddle.net/2Yf7F - 给你，我已经将它添加到bin网站了，你没有看到是因为我们在聊天室里。 - ExCluSiv3

@ExCluSiv3，你的代码示例还没有旋转代码，所以我们仍然无法确定出现了什么问题。无论如何，这里有一个简单的 canvas 动画示例（http://jsfiddle.net/zWdgt/），或许你可以从中获取一些灵感。 - Flambino

你能帮我调整一下我的代码吗？举个例子，你能给我写一个有效的 if 数字等于8 的语句吗？我对你的代码不太理解。 - ExCluSiv3

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 的位置相同，您的两条线就不会断开。希望这能帮到您！

- fassetar