javascript - 如何使用 Canvas 逐步绘制任何线条

Question

我正在尝试在 Canvas 元素中逐步绘制线条(当前使用递归函数)，并且我能够成功绘制平行于 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 的值无法解决问题)

有没有办法在 Canvas 元素中逐步绘制任何类型的线条？

Answer 1

在您的第一个版本中，您从基于当前 i 值的点到基于下一次迭代中 i 值的点绘制线条。但在第二个版本中，起点的 x 值是一个常量。以 i 为起点，以 i - 2 为终点:

let c = document.querySelector('canvas');
let context = c.getContext('2d');
context.lineWidth = 10;
context.lineCap = 'round';
function line(xa, ya, xb, yb) {
    context.beginPath();
    context.moveTo(xa, ya);
    context.lineTo(xb, yb);
    context.stroke();
}
(function drawLine(i){
    line(155 + (57 - i) / 2, i, 155 + (57 - (i - 2)) / 2, (i - 2));
    line(245 - (57 - i) / 2, i, 245 - (57 - (i - 2)) / 2, (i - 2));
    if (i > 35) {
        setTimeout(function(){
            drawLine(i-2);
        }, 10);
    }
})(57);

<canvas></canvas>