Анимация движения по линии canvas

Question

Есть код JavaScript, который создает текст, точку, линию при помощи canvas. Можно ли сделать какую-нибудь анимацию (желательно движущиеся свечения) по линии, от начала (там где точка) к концу?

window.onload = function() {
  WebFontConfig = {
    google: {
      families: ['Outfit:600:latin,cyrillic']
    },
    active: function() {
      setTimeout(() => {
        start();
      }, 0)
    },
  };
  (function() {
    var wf = document.createElement("script");
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.async = 'true';
    document.head.appendChild(wf);
  })();

  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  function start() {
    ctx.font = '600 ' + 50 + 'px ' + 'Outfit'
    ctx.fillText('ALL', 80, 80);
  }
}
const canvas = document.getElementById('canvas');

const ctx = canvas.getContext('2d');
ctx.fillStyle = "#fff";
ctx.beginPath();
ctx.arc(100, 100, 7, 0, 2 * Math.PI);
ctx.fill();
ctx.strokeStyle = '#ffffffad';
ctx.moveTo(105, 100);
ctx.lineTo(440, 40);
ctx.lineTo(850, 280);
ctx.lineWidth = 1;
ctx.stroke();

.main {
  background: black;
}

<div class="main">
  <canvas id="canvas" width="800" height="400"></canvas>
</div>

Answer 1

Простейший эффект, который можно применить - "Эффект марширующих муравьёв":

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

window.onload = function () {
  WebFontConfig = {
    google: { families: ['Outfit:600:latin,cyrillic'] },
    active: loop
  };
  (function () {
    let wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.async = 'true';
    document.head.appendChild(wf);
  })();
};

function text() {
  ctx.font = '600 ' + 50 + 'px ' + 'Outfit';
  ctx.fillText('ALL', 80, 80);
}
function dot() {
  ctx.beginPath();
  ctx.arc(100, 100, 7, 0, 2 * Math.PI);
  ctx.fill();
}
let offset = 0;
let dash = [7, 2], offsetLength = dash.reduce((a,c) => a + c) - 1;
function lines() {
  ctx.setLineDash(dash);
  ctx.lineDashOffset = -offset;
  ctx.fillStyle = '#fff';
  ctx.strokeStyle = '#fff';
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(105, 100);
  ctx.lineTo(440, 40);
  ctx.lineTo(850, 280);
  ctx.stroke();
}

const draw = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  text();
  dot();
  lines();
};

const loop = () => {
  requestAnimationFrame(loop);
  if (++offset > offsetLength) offset = 0;  
  draw();
};

.main { background: black; }

<div class="main"><canvas id="canvas" width="800" height="400"></canvas></div>

БЛОГ НА HUSL

Анимация движения по линии canvas

Ответы (1 шт):