Linea discontinua animada

El mètode ctx.lineDashOffset és perfecte per crear la il·lusió d'una línia que es mou, com si fos una "marxa de formigues" o una barra de progrés animada. L'animació no es fa amb CSS, sinó amb JavaScript, actualitzant el valor de lineDashOffset en cada fotograma del Canvas.

Per aconseguir l'efecte de moviment, necessitem una funció que s'executi repetidament per:

Això es realitza normalment utilitzant requestAnimationFrame().

Demo

Aquest exemple dibuixa una línia diagonal i fa que el patró discontinu es desplaci contínuament.

<canvas id="animacioDash" width="300" height="200" 
style="border: 2px solid #555; background-color: #eee;"></canvas>

<script>
    const canvas = document.getElementById("animacioDash");
    const ctx = canvas.getContext("2d");

    // --- Configuració de l'Animació ---
    let dashOffset = 0; // Variable global per al desplaçament
    
    // El patró: línia de 15px, espai de 10px.
    const dashPattern = [15, 10]; 
    
    // --- Funció de Dibuix (un sol fotograma) ---
    function draw() {
        // 1. Netejar el canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // 2. Actualitzar l'Offset per al següent fotograma
        // Disminuïm l'offset lentament. Hauriem de fer servir l'operador % (mòdul) per
        // quan torni a 0 i superi la llargada total del patró (15+10=25),
        // evitant que el valor creixi/decreixi infinitament.
        dashOffset -= 0.5; // Velocitat de l'animació
        ctx.lineDashOffset = dashOffset; 
        
        // 3. Dibuixar la Línia Diagonal
        ctx.strokeStyle = 'purple';
        ctx.lineWidth = 4;
        
        ctx.setLineDash(dashPattern); // Aplica el patró

        ctx.beginPath();
        ctx.moveTo(30, 170); // Punt A
        ctx.lineTo(270, 30); // Punt B
        ctx.stroke();

        // 4. Bucle: Sol·licitar el següent fotograma
        // Això crea un bucle eficient que s'executa a la velocitat de 
        // refresc del monitor (normalment 60 vegades per segon).
        requestAnimationFrame(draw);
    }

    // Comença el bucle d'animació
    requestAnimationFrame(draw);
</script>

El secret resideix en la funció draw() i l'ús de requestAnimationFrame(draw):

Amb aquesta tècnica, pots aplicar l'efecte de moviment a qualsevol línia o contorn que dibuixis al Canvas, des de formes de Bézier fins a contorns de rectangle.