web-dev-qa-db-fra.com

La fonction clearRect n'efface pas le canevas

J'utilise ce script sur la fonction body onmousemove:

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

Il est censé effacer le canevas chaque fois que je déplace la souris et dessine une nouvelle ligne, mais cela ne fonctionne pas correctement. J'essaie de le résoudre sans utiliser jQuery, des écouteurs de souris ou similaires.

Voici une démo: https://jsfiddle.net/0y4wf31k/

javascriptlinedrawclearonmousemove
31
Juan C. Roldán

Vous devez utiliser "beginPath ()". C'est ça.

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();
}
61
aviomaksim

Sachez que ctx.clearRect () ne pas fonctionne correctement sur Google Chrome. J'ai passé des heures à essayer de résoudre un problème connexe, pour constater que sur Chrome, au lieu de remplir le rectangle avec rgba (0, 0, 0, 0), il en fait remplit le rectangle avec rgba (0 , 0, 0, 1) à la place!

Par conséquent, pour que le rectangle soit correctement rempli avec les pixels noirs transparents requis, vous devez, sur Chrome, le faire à la place:

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

Cela devrait, bien sûr, fonctionner sur tous les navigateurs fournissant une prise en charge appropriée de l'objet HTML5 Canvas.

1
David Edwards