Javascript 如何使用画布逐步绘制任何线条

我正在尝试在画布元素中逐步绘制线（目前使用递归函数），并且我能够成功地绘制平行于x或y轴的线对，如下所示：

function line(xa, ya, xb, yb) {
    context.beginPath();
    context.moveTo(xa, ya);
    context.lineTo(xb, yb);
    context.stroke();
}

(function drawLine(i){
    line(155, i, 155, i-2);
    line(245, i, 245, i-2);
    if (i > 35) {
        setTimeout(function(){
            drawLine(i-2);
        }, 10);
    }
})(57);

我明白了：

（

context.lineWidth

设置为

10

和

context.lineCap

设置为

round

）

然而，我尝试了几种方法来绘制线对，这些线既不是严格意义上的水平线，也不是垂直线，但我只能得到如下结果：

(function drawLine(i){
    line(155, i, 155+(57-i)/2, i-2);
    line(245, i, 245-(57-i)/2, i-2);
    if (i > 35) {
        setTimeout(function(){
            drawLine(i-2);
        }, 10);
    }
})(57);

（更改

context.lineWidth

或

context.lineCap

的值并不能解决问题）

---

有没有一种方法可以在画布元素中逐步绘制任何类型的线？

在您的第一个版本中，您可以从基于当前值

i

的点到下一次迭代中基于值

i

的点绘制线。但是在第二个版本中，起点的

x

值是一个常数。起点基于

i

，终点基于

i-2

：

let c=document.querySelector（'canvas'）；
让context=c.getContext（'2d'）；
context.lineWidth=10；
context.lineCap='round'；
功能行（xa、ya、xb、yb）{
context.beginPath（）；
moveTo（xa，ya）；
lineTo（xb，yb）；
stroke（）；
}
（功能抽绳（一）{
线（155+（57-i）/2，i，155+（57-（i-2））/2，（i-2））；
第（245-（57-i）/2，i，245-（57-（i-2））/2，（i-2））；
如果（i>35）{
setTimeout（函数（）{
抽绳（i-2）；
}, 10);
}
})(57);
最简单的方法是使用：


const canvas=newcanvas（'my-canvas'，200200）.start（）；
const line1=新画布.Line({
发件人：{
x:50，
y:70
},
致：{
x:60，
y:30
},
线宽：7，
线头：“圆形”，
线宽：0.1
});
canvas.addElement（第1行）；
line1.动画（'lineLength'，{lineLength:1，duration:500}）；
const line2=新画布.Line({
发件人：{
x:90，
y:70
},
致：{
x:80，
y:30
},
线宽：7，
线头：“圆形”，
线宽：0.1
});
canvas.addElement（第2行）；
line2.动画（'lineLength'，{lineLength:1，duration:500}）
使用划线沿路径设置动画。
沿任何路径设置动画的简单方法是使用直线划线和直线划线偏移


const ctx=canvas.getContext（'2d'）；
ctx.线宽=10；
ctx.lineCap='圆形'；
函数drawLines（）{
功能抽绳（x1、y1、x2、y2）{
ctx.moveTo（x1，y1）；
ctx.lineTo（x2，y2）；
}
抽绳（10,10490,90）；
抽绳（10190490110）；
}
变量lineLength=30；//像素
var距离=400；
var-lineSpeed=300//每秒像素数
ctx.setLineDash（[线宽，间距]）；
函数动画线（时间）{
ctx.lineDashOffset=-time*lineSpeed/1000；
ctx.stroke（）；
}
函数循环（时间）{
clearRect（0,0，ctx.canvas.width，ctx.canvas.height）；
ctx.beginPath（）；
抽绳（）；
动画线（时间）；
请求动画帧（循环）；
}
请求动画帧（循环）
也许这两个链接是一个好的开始：-线路会笔直吗？