Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

434
Visualizações
How to make a pen or a hand follow a path?

I am creating a hand draw animation using canvas. This is the code I have written:

<div class="container">
            <div class="topButtons">
                <select id="svgDropDown">
                    <option value="-1" selected="selected">Select SVG</option>
                    <option value="0">Hello</option>
                    <option value="1">Curve</option>
                    <option value="2">Line</option>
                    <option value="3">Happy</option>
                </select>
                <button id="playBtn" onclick="handleClick()">Play</button>
            </div>
            <canvas id='canvas' width='600' height='300'></canvas>
        </div>


function handleClick() {
    var e = document.getElementById("svgDropDown");
    var option = e.value;
    if (option == -1)
        window.alert("Select SVG First");
    else
        create(option);
}

function create(option) {

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

    var offset = 1846;
    var pathMap = paths[option].path;
    var p = new Path2D(pathMap);

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.fillStyle = "#333";
        ctx.rect(0, 0, 600, 300);
        ctx.fill();


        ctx.beginPath();
        ctx.strokeStyle = 'lightgreen';
        ctx.lineCap = "round";
        ctx.setLineDash([1846, 1846]);
        ctx.lineWidth = 4;
        ctx.lineDashOffset = offset;
        ctx.stroke(p);
    }
    var btn = document.getElementById("playBtn");
    function animate() {
        offset -= 2;
        draw();
        var lineDraw = setTimeout(animate, 5);
        if (offset <= 0) {
            clearTimeout(lineDraw);
            btn.disabled = false;
        }
        else
            btn.disabled = true;
    }

    animate();

};

It is working as I desired, but I want a pen or a hand like image to follow the traced path so that it appears as if the pen is writing the content just like in whiteboard. How can I do it so?

about 4 years ago · Juan Pablo Isaza
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda