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

Question

我正在尝试在画布元素中逐步绘制线条（目前使用递归函数），并且我能够成功地绘制平行于 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的值并不能解决问题）

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

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>

Answer 2

最简单的方法是使用Canvas.js：

const canvas = new Canvas('my-canvas', 200, 200).start();

const line1 = new Canvas.Line({
  from: {
    x: 50,
    y: 70
  },
  to: {
    x: 60,
    y: 30
  },
  lineWidth: 7,
  lineCap: 'round',
  lineLength: 0.1
});

canvas.addElement(line1);

line1.animate('lineLength', {lineLength: 1, duration: 500});

const line2 = new Canvas.Line({
  from: {
    x: 90,
    y: 70
  },
  to: {
    x: 80,
    y: 30
  },
  lineWidth: 7,
  lineCap: 'round',
  lineLength: 0.1
});

canvas.addElement(line2);

line2.animate('lineLength', {lineLength: 1, duration: 500});

<script src="https://gustavgenberg.github.io/handy-front-end/Canvas.js"></script>

Answer 3

使用虚线沿路径设置动画。

沿任何路径制作动画的一种简单方法是使用虚线和虚线偏移。

const ctx = canvas.getContext('2d');
ctx.lineWidth = 10;
ctx.lineCap = 'round';


function drawLines(){
   function drawLine(x1, y1, x2, y2){
      ctx.moveTo(x1,y1);
      ctx.lineTo(x2,y2); 
   }
   drawLine(10,10,490,90);
   drawLine(10,190,490,110);
}

var lineLength = 30; // pixels
var distanceBetween = 400;
var lineSpeed = 300;  //pixels per second
ctx.setLineDash([lineLength, distanceBetween]); 

function animateLines(time){
    ctx.lineDashOffset = -time * lineSpeed / 1000;
    ctx.stroke();
}

function loop(time){
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
    ctx.beginPath();
    drawLines();
    animateLines(time);
    requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

<canvas id="canvas" width=500 height=200></canvas>