Javascript/jQuery: suppression de la forme/voie de la toile

Je n'arrive pas à trouver la fonction pour supprimer une forme ou d'un chemin d'accès à partir de la toile après qu'il a été créé.

Je suis donc la création d'une courbe de bézier entre 2 points avec

beginPath();
bezierCurveTo();
stroke();
closePath();

Comment puis-je supprimer ce à partir de la toile une fois, il a été créé? J'ai besoin d'être en mesure d'appeler la fonction de suppression via toggle() et blur(). Je suis sûr que quelque chose existe pour cela...

Merci d'avance pour toute aide!

Je voulais juste mentionner que l'utilisation de closePath() ici et dans beaucoup de réponses est fausse. Il est utilisé pour compléter un chemin en traçant une ligne sur le chemin du départ. Appeler après stroke n' absolument rien. stackoverflow.com/questions/10807230/...

OriginalL'auteur bobsoap | 2010-04-03

  1. 18

    Essayez ceci:

    ctx.save();
ctx.globalCompositeOperation = "destination-out";
//drawing here you path second time
ctx.restore();

    "La globalCompositeOperation attribut définit la façon dont les formes et les images sont tirées sur la surface bitmap" specs

    Comment il fonctionne, vous pouvez voir ici.

    Veuillez fournir un contexte pour l'explication plutôt que de simplement un lien vers elle. Par la FAQ: "Toujours citer la partie la plus pertinente d'un lien important, dans le cas où l'objectif du site est inaccessible ou va définitivement hors ligne."

    OriginalL'auteur agegorin

  2. 7

    C'est une chose importante à réaliser sur <canvas>. C'est aplatie image composée de pixels. Une fois que quelque chose se dessine, il est fusionné dans la grille de pixels et ne peuvent pas être différenciés des autres pixels.

    Si vous avez besoin d'être en mesure de séparer les éléments de l'image vous pouvez:

    1. Superposition <canvas> éléments dans une pile de couches
    2. Utilisation <svg> dans lequel chaque élément visuel est distinct des autres éléments et peuvent être manipulées indépendamment

    Vous pouvez penser <canvas> comme étant un seul calque dans PhotoShop/Gimp/feux d'Artifice ou d'un MSPaint document.

    Vous pouvez penser <svg> comme un document dans Illustrator/InkScape.

    OriginalL'auteur Drew Noakes

  3. 5

    Vous ne pouvez pas supprimer un chemin de la forme de la toile. Vous pouvez en tirer quelque chose d'autre sur elle ou désactivez la toile.

    OriginalL'auteur nxt

  4. 3

    Merci pour le bon d'entrée à tous de vous - même, il m'a aidé à trouver la solution:

    context.clearRect(x,y,w,h);

    (lien)

    C'est clair rien à l'intérieur d'un rectangle.

    J'ai trouvé la méthode sur la page, j'ai trouvé en creusant pour ILog, en réponse à sauver/restaurer le contexte, et c'est tout. Merci encore.

    OriginalL'auteur bobsoap

  5. 1

    Vous pouvez essayer en utilisant SVG au lieu de la toile. Il y a une fantastique bibliothèque appelée Raphaël qui rend le travail avec SVG un jeu d'enfant. Il fonctionne dans tous les navigateurs, y compris IE6.

    Avec SVG chaque forme est son propre élément qui peut être déplacé, transformé ou supprimé.

    Cela semble fantastique, je suis déjà à la recherche en elle. Merci!
    Une rétrospective commentaire ici - si vous êtes à dessiner beaucoup, SVG sera généralement moins performantes que la toile. Je suis actuellement en train de refactoring d'une application qui fait beaucoup de dessin SVG à l'aide de la toile.

    OriginalL'auteur bcherry

  6. 1

    Pour effacer votre toile, utilisez le code suivant

        canvas_context.clearRect(0,0,canvas_1.width,canvas_1.height);

    Toujours utiliser beginPath méthode lorsque vous commencez à tracer un nouveau chemin d'accès et closePath méthode après avoir fini le dessin de votre chemin.

    REMARQUE: des Chemins qui ne sont pas fermées ne peut pas être effacée.

    Si vos chemins d'accès ne sont pas d'être effacé, il faut que la raison invoquée ci-dessus.

    chemin d'accès DOIT commencer avec beginPath() et à la fin avec closePath()

    Exemple:

         canvas_context.beginPath();
     canvas_context.moveTo(x1,y1);
     canvas_context.lineTo(x2,y2);
     canvas_context.stroke();
     canvas_context.closePath();

    Le code suivant efface également votre toile

        canvas_1.width = canvas_1.width;

    REMARQUE: La déclaration ci-dessus réinitialise une toile donc il efface une toile. Toute déclaration qui réinitialise une toile claire une toile.

    "Tous les chemin d'accès DOIT commencer avec beginPath() et à la fin avec closePath()" - Faux! voir stackoverflow.com/questions/10807230/...
    Viens de tester de nouveau dans mon google Chrome et vous avez raison. De retour en 2011 quand j'ai testé cela en Chrome, les chemins n'ont pas été fermés ne l'ai jamais effacé. De toute façon, merci pour la mise à jour.

    OriginalL'auteur Coder X

  7. 0

    Aussi loin que je me souviens de la spécification vous devez contexte d'appel.save() avant de dessiner, puis de dessiner quelque chose, et puis le contexte d'appel.restore() pour revenir à l'état précédent.

    Merci pour la suggestion - j'ai essayé (sans succès), puis trouvé cette ressource (whatwg.org/specs/web-apps/current-work/multipage/...) en indiquant: "Le chemin d'accès actuel et le courant bitmap ne font pas partie du dessin de l'état. Le chemin d'accès actuel est persistant, et ne peut être réinitialisé à l'aide de la beginPath() la méthode. L'actuel bitmap est une propriété de la toile, pas le contexte." Merci quand même, beaucoup apprécié!
    sauvegarder/restaurer uniquement fonctionner sur certaines propriétés du contexte, et qui n'en aura jamais d'effet visible sur l'image si vous n'avez pas de dessiner quelque chose par la suite. Cet article fournit plus d'informations.

    OriginalL'auteur ILog

  8. 0

    Si vous êtes à l'aide de JQuery:

    var elem = $("selector");
var canvas = elem.get(0);
var context = canvas.getContext("2d");

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

    Remplacer "sélecteur" avec votre sélecteur JQuery.

    OriginalL'auteur Obinwanne Hill