Comment faire pour effacer un canevas HTML?

Je suis en train de mettre en œuvre un bouton effacer, mais il ne semble pas fonctionner.

J'ai un tableau de x, y, et faites glisser les positions avec les couleurs associées. Lors du bouton est pressé (et c'est, je l'ai vérifié avec une boîte d'alerte), je suis à la compensation de l'ensemble de ces tableaux et en désactivant la toile comme suit:

clickX.length = 0;
clickY.length = 0;
clickDrag.length = 0;
clickColor.length = 0;
var context = $('#canvas')[0].getContext('2d');
context.width = context.width;
context.height = context.height;

J'ai entendu le réglage de la largeur et la hauteur peut être plus lente, donc j'ai toujours essayé:

context.clearRect(0, 0, context.width, context.height);

Cependant, aucune de ces semblent être au travail. Les tableaux sont vidés mais au préalable le contenu de la toile juste rester coincé là-bas. Je ne sais pas pourquoi ils ne sont pas être effacé.

Merci pour la lecture.

InformationsquelleAutor Ryan Peschel | 2012-06-02
  1. 13

    Vous devriez être en utilisant la .width de la toile élément, pas son contexte.

    Il n'y a pas de .width de propriété dans le contexte, de sorte que votre .clearRect appel est effectivement passé de zéro pour ses deux derniers paramètres.

    De même, l'ajout d'un nouveau .width bien au contexte de ne pas faire n'importe quoi.

    Viens de le faire

    var canvas = $('#canvas')[0]; //or document.getElementById('canvas');
canvas.width = canvas.width;

    comme décrit dans le cahier des charges (mon emphase):

    Lorsque l'élément canvas est créé, et par la suite chaque fois que les attributs width et height sont définies (si une nouvelle valeur ou à la valeur précédente), le bitmap et des contextes doit être effacé de retour à leur état initial et réinitialisé avec la nouvelle spécifié coordonner les dimensions de l'espace.

    Noter que .clearRect() prendra tout tracé de détourage et de remplir les styles de compte, le choix de la width attribut est la seule façon de réinitialiser complètement une toile à son état d'origine. Si vous n'avez pas utilisé les chemins de détourage puis .clearRect() peut-être bien plus rapide, bien que!

    • merci monsieur, content de savoir.
    InformationsquelleAutor Alnitak
  2. 1

    Alnitak de la méthode est une méthode, mais juste pour ajouter plus d'informations, vous devez être conscient que le réglage de la largeur réinitialise également tous les canevas de l'état. Cela signifie que vous devrez mettre vos polices, de styles, de la largeur de ligne, etc nouveau. Pour des raisons de performances, il peut être utile pour mettre en cache ces (ne pas les modifier, sauf si vous devez absolument, surtout font, qui est lente à définir) afin de faire canvas.width = canvas.width n'est pas toujours idéal.

    Il y a bien sûr

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    Mais ce ne sera pas beaucoup vous aider si vous avez un complexe de transformation de la matrice. Si c'est le cas, vous pouvez toujours temporairement réinitialiser la matrice de transformation de la manière suivante:

    //I have lots of transforms right now
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
//Will always clear the right space
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.restore();
//Still have my old transforms
    InformationsquelleAutor Simon Sarris