Javascript 使用for循环使用画布绘制线

我试图用画布画线，我用for循环改变坐标

这是我的画布元素：

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

以下是演示：

请参阅：

因为画布坐标不直接参考像素，所以必须特别注意获得清晰的水平线和垂直线

基本上，因为你试图画一条0.2像素宽的线，浏览器会做一些数学运算，把一个连续的数字近似成离散的单位，你就得到了你的“褪色”线

现在我们可以通过将

context.lineWidth

更改为1（我实际上删除了它，因为它默认为1）并将所有内容向下移动半个像素来修复代码

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

function fnc(x, ci)
{
    ci.strokeStyle = 'red'; 
    ci.moveTo(0, x); 
    ci.lineTo(300, x);
    ci.stroke();
}

var c=document.getElementById（'c'）；
ci=c.getContext（'2d'）；
对于（var a=18.5；a<300.5；a+=18）
{
fnc（a，ci）；
}   
功能fnc（x，ci）
{
ci.strokeStyle=‘红色’；
ci.moveTo（0，x）；
ci.lineTo（300，x）；
ci.stroke（）；
}

---

这也是忘记给beginPath打电话的永恒问题。
每次调用moveTo和lineTo时，都会创建一个新的*子*路径，该路径将添加到当前路径中。
然后，每次调用stroke（）时，都会返回当前路径，以便在第一次绘制最后添加的路径时重新绘制所有当前子路径。
由于不透明度将相加，当绘制一次的底线不透明度为20%（线宽=0.2）时，顶线将达到100%不透明度（alpha=255）

在第二个提琴中，只需笔划一次，因此所有线条都具有20%的不透明度，这对于0.2线宽是正确的

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

（见下面的代码）

提示：要获得清晰的线条，请记住像素的中心位于每个像素的（+0.5，+0.5）坐标处，因此 一个“技巧”是在应用程序启动时平移0.5、0.5，然后只使用圆角坐标和线宽

1） 逐行画

var c=document.getElementById（'c'）；
var ctx=c.getContext（'2d'）；
ctx.translate（0.5,0.5）；
ctx.lineWidth=1；
对于（变量y=18；y<300；y+=18）{
strokeLine（ctx，y）；
}
函数频闪线（ctx，y）{
ctx.beginPath（）；
ctx.strokeStyle=‘红色’；
ctx.moveTo（0，y）；
ctx.lineTo（300，y）；
ctx.stroke（）；
}

2） 绘制多个子路径： （一个笔划只能有一种颜色（）

var c=document.getElementById（'c'）；
var ctx=c.getContext（'2d'）；
ctx.translate（0.5,0.5）；
ctx.lineWidth=1；
ctx.strokeStyle=‘红色’；
ctx.beginPath（）；
对于（变量y=18；y<300；y+=18）{
addLineSubPath（ctx，y）；
}
ctx.stroke（）；
函数addLineSubPath（ctx，y）{
ctx.moveTo（0，y）；
ctx.lineTo（300，y）；
}

谢谢您的回答。我还更新了我的问题。所以在我的情况下，没有办法用0.2px来画线/一条0.2像素宽的线会是什么样子？

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

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

function fnc(x, ci)
{
    ci.strokeStyle = 'red'; 
    ci.moveTo(0, x); 
    ci.lineTo(300, x);
    ci.stroke();
}

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

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