clearRect funzione non chiara la tela

Sto utilizzando questo script sul corpo onmousemove funzione:

function lineDraw() {
    //Get the context and the canvas:
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    //Clear the last canvas
    context.clearRect(0, 0, canvas.width, canvas.height);
    //Draw the line:
    context.moveTo(0, 0);
    context.lineTo(event.clientX, event.clientY);
    context.stroke();
}

Dovrebbe deselezionare l’area ogni volta che mi muovo il mouse e disegnare una nuova linea, ma non funziona correttamente.
Sto cercando di risolverlo senza l’utilizzo di jQuery, mouse listener o simili.

Qui è una demo: https://jsfiddle.net/0y4wf31k/



3 Replies
  1. 57

    Si dovrebbe usare “beginPath()“. Che è.

    function lineDraw() {   
        var canvas=document.getElementById("myCanvas");
        var context=canvas.getContext("2d");
        context.clearRect(0, 0, context.width,context.height);
        context.beginPath();//ADD THIS LINE!<<<<<<<<<<<<<
        context.moveTo(0,0);
        context.lineTo(event.clientX,event.clientY);
        context.stroke();
    }
    • Vorrei aggiungere che questo vale per i metodi draw come rect e arco, come pure.
    • E ‘ vecchio ma… closePath è inutile e fuorviante, qui, è solo un lineTo(previousStartingPointOfThePath) così per una singola riga, non fare nulla, e non dire a tutti che, una volta terminato il percorso di dichiarazione.
    • Grazie @kaiido, ho modificato la domanda. Penso che la modifica è nello spirito della risposta. Spero non ti dispiaccia aviomaksim
  2. 1

    Essere informati che ctx.clearRect() non non funzionare correttamente su Google Chrome. Ho passato ore a cercare di risolvere un problema correlato, solo per scoprire che su Chrome, invece di riempire il rettangolo con rgba(0, 0, 0, 0), si effettivamente riempie il rettangolo con rgba(0, 0, 0, 1), invece!

    Di conseguenza, in modo da avere il rettangolo riempito correttamente con la necessaria nero trasparente pixel, è necessario, su Chrome, per fare questo, invece:

    ctx.fillStyle = "rgba(0, 0, 0, 0)";
    ctx.fillRect(left, top, width, height);

    Questo dovrebbe, naturalmente, funziona su tutti i browser, fornendo adeguato supporto per l’HTML5 Canvas oggetto.

  3. -3

    Provare con context.canvas.width = context.canvas.width:

    function lineDraw() {   
        var canvas=document.getElementById("myCanvas");
        var context=canvas.getContext("2d");
        //context.clearRect(0, 0, context.width,context.height);
        context.canvas.width = context.canvas.width;
        context.moveTo(0,0);
        context.lineTo(event.clientX,event.clientY);
        context.stroke();
    }

    Demo QUI

    • o semplicemente myCanvas.width = myCanvas.width;.

Lascia un commento