javascript - 使用 for 循环在 Canvas 上绘制线条

Question

我正在尝试用 Canvas 画线，我正在用 for 循环更改坐标。

这是我的 Canvas 元素:

<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 像素的间距。但是线条的粗细和颜色(或不透明度，我不确定)从上到下都在变化。

这是一个 fiddle :http://jsfiddle.net/J6zzD/1/

所以我找不到我的错误有什么问题。为什么颜色和厚度不同？

更新:

我只是从函数中写出这些线，现在所有的线都变淡了，但粗细是一样的。好奇怪:

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

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

Answer 1

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

在你的第二个 fiddle 中，你只画了一次，所以所有的线条都有 20% 的不透明度，这对于 0.2 lineWidth 是正确的。

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

(见下面的代码)。

提示:要获得清晰的线条，请记住像素的中心位于每个像素的 (+0.5, +0.5) 坐标处，因此一个“技巧”是在应用启动时平移 0.5、0.5，然后仅使用圆 Angular 坐标和线宽。

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) 绘制多个子路径:(一个笔划只能有一种颜色())

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);
}