ctx alternatif. Utilisez StrokeStyle lors de l'utilisation de requestAnimationFrame()

Question

J'essaie de dessiner un mouvement aléatoire simple comme toile d'arrière-plan pour ma page de destination et j'ai du mal à donner aux lignes une couleur unique.

J'ai aussi essayé de le changer après le film sans succès (on dirait juste un mélange de couleurs).

const canvas = document.getElementById('myCanvas');
const ctx = toile.getContext('2d');
//ctx.canvas.width = window.innerWidth;
//ctx.canvas.height = window.innerHeight*4;

const numSteps = ctx.canvas.width / 2 + 10 ;
const stepSize = 10 ;
const startX = 0 ;
const startY = toile.hauteur / 2;
const timeInterval = 15 ;

var Point = fonction (color_inp){
  this.x = startX;
  this.y = startY;
  this.color = color_inp;
}

const couleurs = [
  '#FF1493', // Rose
  '#FF00FF', // Magenta
  '#800080', // Violet
  '#4B0082', //Indigo
  '#0000FF', // Bleu
  '#00FFFF', //Cyan
  '#00FF00', // Vert
  '#FFFF00', // Jaune
  '#FF7F00', //Orange
  '#8B4513' // Marron selle
];



function drawRandomWalk(stPoint, étapes) {
  ctx.globalAlpha = 0,01 ;
  laissez stepCount = 0 ;
  ctx.beginPath();
  ctx.StrokeStyle = stPoint.color;
  ctx.moveTo(stPoint.x, stPoint.y);
  setTimeout(drawStep, 10);
  
  fonction drawStep() {
    if (stepCount >= étapes) {
      retour;
    }

    ctx.moveTo(stPoint.x, stPoint.y);
    const direction = Math.random() <
    stPoint.y += stepSize * direction ;
    stPoint.x = startX + stepCount * 2 ;
    ctx.lineTo(stPoint.x, stPoint.y);
    ctx.lineWidth = 1;
    ctx.AVC();
    stepCount++;
    requestAnimationFrame(drawStep);
  }
}

pour (const couleur des couleurs)
{
  const startPoint = nouveau Point (couleur);
  drawRandomWalk(startPoint, numSteps);
}</pré>
<pre class="brush:html;toolbar:false;"><canvas id="myCanvas" width="600" height="600"></canvas>

Answer 1

Le problème est que chaque "stylo" qui trace une ligne partage un état - vous dessinez un long chemin composé de nombreux mouvements/lignes, encore et encore.

Si vous souhaitez obtenir l'effet de dégradé globalAlpha (qui repose sur la capacité de tracer des lignes encore et encore), vous devez tracer chaque dessin au stylo individuellement et le dessiner comme indiqué ci-dessous.

Je me suis débarrassé de la structure Point car elle n'est pas vraiment nécessaire.

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

const numSteps = ctx.canvas.width / 2 + 10;
const stepSize = 10;
const startX = 0;
const startY = canvas.height / 2;
const timeInterval = 15;

const colors = [
  '#FF1493', // Pink
  '#FF00FF', // Magenta
  '#800080', // Purple
  '#4B0082', // Indigo
  '#0000FF', // Blue
  '#00FFFF', // Cyan
  '#00FF00', // Green
  '#FFFF00', // Yellow
  '#FF7F00', // Orange
  '#8B4513'  // Saddle Brown
];



function drawRandomWalk(startX, startY, color, nSteps) {
  setTimeout(drawStep, 10);
  const steps = [[startX, startY]];
  
  function drawStep() {
    if (steps.length >= nSteps) {
      return;
    }
    // Draw current line
    ctx.globalAlpha = 0.01;
    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.lineWidth = 1;
    let x = 0, y = 0;
    for(let i = 0; i < steps.length; i++) {
      [x, y] = steps[i];
      if(i === 0) ctx.moveTo(x, y);
      else ctx.lineTo(x, y);
    }
    ctx.stroke();
    // Compute next point
    const direction = Math.random() < 0.5 ? -1 : 1;
    y += stepSize * direction;
    x = startX + steps.length * 2; 
    steps.push([x, y]);
    requestAnimationFrame(drawStep);
  }
}

for(const color of colors)
{
  drawRandomWalk(startX, startY, color, numSteps);
}

<canvas id="myCanvas" width="600" height="600"></canvas>