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); }
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.