ctx silih berganti. Gunakan strokeStyle apabila menggunakan requestAnimationFrame()

Question

Saya cuba melukis gerakan rawak mudah sebagai kanvas latar belakang untuk halaman pendaratan saya dan saya menghadapi masalah mendapatkan garisan untuk mempunyai warna yang unik.

Saya juga cuba menukarnya selepas filem tidak berjaya (hanya kelihatan seperti warna campuran).

const canvas = document.getElementById('myCanvas');
const ctx = canvas.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 = canvas.height / 2;
const timeInterval = 15;

var Point = function(color_inp){
  ini.x = mulaX;
  ini.y = mulaY;
  this.color = color_inp;
}

warna const = [
  '#FF1493', // Merah jambu
  '#FF00FF', // Magenta
  '#800080', // Ungu
  '#4B0082', // Indigo
  '#0000FF', // Biru
  '#00FFFF', // Cyan
  '#00FF00', // Hijau
  '#FFFF00', // Kuning
  '#FF7F00', // Jingga
  '#8B4513' // Pelana Coklat
];



fungsi drawRandomWalk(stPoint, langkah) {
  ctx.globalAlpha = 0.01;
  biarkan stepCount = 0;
  ctx.beginPath();
  ctx.strokeStyle = stPoint.color;
  ctx.moveTo(stPoint.x, stPoint.y);
  setTimeout(drawStep, 10);
  
  fungsi drawStep() {
    jika (StepCount >= langkah) {
      kembali;
    }

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

untuk (warna const warna)
{
  const startPoint = new Point(warna);
  drawRandomWalk(startPoint, numSteps);
}

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

Answer 1

Masalahnya ialah setiap "pen" yang melukis garisan berkongsi menyatakan - anda sedang melukis laluan panjang yang terdiri daripada banyak pergerakan/garisan, berulang kali.

Jika anda mahukan kesan kecerunan globalAlpha (yang bergantung pada keupayaan melukis garisan berulang kali), anda perlu menjejak setiap lukisan pen secara individu dan melukisnya seperti yang ditunjukkan di bawah.

Saya menyingkirkan struktur Point kerana ia tidak begitu diperlukan.

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>