使用for循环在画布上绘制线条

我正在尝试用画布绘制线条，并使用 for 循环更改坐标。

这是我的画布元素：

<canvas id="c" width="300px" height="300px"></canvas>

这是js代码：

var c = document.getElementById('c');
ci = c.getContext('2d');
for(var a = 18; a < 300; a +=18){
            fnc(a, ci);
            }   
function fnc(x, ci){

        ci.strokeStyle = 'red'; 
        ci.moveTo(0, x); 
        ci.lineTo(300, x); ci.lineWidth = 0.2; ci.stroke(); 
    }

正如你所看到的，我试图绘制这些线条，线条之间有 18 像素的间距。但是线条的粗细和颜色（或不透明度，我不确定）从上到下正在变化。

这是一个小提琴：http://jsfiddle.net/J6zzD/1/

那么我找不到我的错误是怎么回事。为什么颜色和厚度不同？

UPDATE :

我刚刚将这些线写出函数，现在所有线都变淡了，但粗细是相同的。这么奇怪 ：

 ci.strokeStyle = 'red'; 
 ci.lineWidth = 0.2; ci.stroke();

这是演示：http://jsfiddle.net/J6zzD/4/

这又是忘记调用 beginPath 的永恒问题。
每次调用 moveTo 和 lineTo 时，都会创建一个新的 *sub*path，该路径会添加到当前 Path 中。
然后，每次调用中风（）时，当前路径，因此当第一次绘制最后添加的路径时，所有当前子路径都会重新绘制。
由于不透明度会累加，因此绘制一次的底线将具有 20% 不透明度 (lineWidth=0.2) 时，顶线将达到 100% 不透明度 (alpha=255)。

在第二个小提琴中，您仅描边一次，因此所有线条都有 20% 的不透明度，这对于 0.2 线宽来说是正确的。

所以：在绘制新图形之前使用 beginPath。
在这种情况下你有两个选择：
• 逐行绘制 或者
• 绘制一次路径，将所有线作为子路径。

（参见下面的代码）。

TIP：要获得干净的线条，请记住像素的中心位于每个像素的 (+0.5, +0.5) 坐标处，因此 一个“技巧”是在应用程序启动时平移 0.5, 0.5，然后仅使用圆角坐标和线宽.

1）逐行绘制

http://jsfiddle.net/gamealchemist/J6zzD/6/

var c = document.getElementById('c');
var ctx = c.getContext('2d');
ctx.translate(0.5, 0.5);
ctx.lineWidth = 1;

for (var y = 18; y < 300; y += 18) {
    strokeLine(ctx, y);
}

function strokeLine(ctx, y) {
    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.moveTo(0, y);
    ctx.lineTo(300, y);
    ctx.stroke();
}

2）绘制多个subPath： （一笔画只能有一种颜色() ）

http://jsfiddle.net/gamealchemist/J6zzD/7/

var c = document.getElementById('c');
var ctx = c.getContext('2d');
ctx.translate(0.5, 0.5);
ctx.lineWidth = 1;

ctx.strokeStyle = 'red';

ctx.beginPath();
for (var y = 18; y < 300; y += 18) {
    addLineSubPath(ctx, y);
}
ctx.stroke();

function addLineSubPath(ctx, y) {
    ctx.moveTo(0, y);
    ctx.lineTo(300, y);
}