Comment faire pour supprimer un objet de la toile?

J'ai fais ce script qui va faire tourner une aiguille sur un compte-tours à l'aide de la toile. Je suis un newbie à cette toile. C'est mon code:

function startup() {
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var meter = new Image();
  meter.src = 'background.png';
  var pin = new Image();
  pin.src = 'needle.png';
  context.drawImage(meter,0,0);
  context.translate(275,297);
  for (var frm = 0; frm < 6000; frm++){
    var r=frm/1000;               //handle here                                
    var i=r*36-27;  //angle of rotation from value of r and span
    var angleInRadians = 3.14159265 * i/180;  //converting degree to radian                
    context.rotate(angleInRadians); //rotating by angle
    context.drawImage(pin,-250,-3);  //adjusting pin center at meter center
  }
}

Voici le script en action:

http://www.kingoslo.com/instruments/

Le problème est, comme vous pouvez le voir, que l'aiguille rouge n'est pas supprimé entre chaque boucle for.

Ce que je dois faire est de nettoyer la toile pour la broche objet entre chaque cycle de la boucle. Comment puis-je faire cela?

Grâce.

Salutations,

Marius

Note que bien que un conservé le mode de dessin système—comme le HTML ou le SVG—maintient des objets spécifiques liés aux éléments dessinés, un non retenu le mode de dessin système—comme du Canvas HTML—ne. Avec SVG, vous pouvez modifier les éléments ou documents après le fait et l'ont redessiner; avec Canvas HTML vous devez garder une trace de tous les objets vous-même et de redessiner ce que vous avez besoin si vous voulez changer la sortie.

OriginalL'auteur Mikkel Rev | 2010-12-26

  1. 7

    Utilisation clearRect pour effacer la toile (que ce soit en partie ou la totalité de la chose). HTML canvas objet est un plat bitmap de pixels, donc il n'y a pas de notion de "objets" sur la toile.

    Également garder à l'esprit que JavaScript est mono-thread, de sorte que votre pour la boucle ne sera pas animer l'aiguille, il sera tout simplement s'asseoir là, et en tirer toutes les mises à jour, après c'est fait, le navigateur va réellement rafraîchir le visible toile avec son état le plus récent.

    Si vous souhaitez l'animer, vous aurez à créer une boucle de rendu. Dev.L'opéra a un article sur le framerate de contrôle, qui devrait vous obtenir a commencé, alors vous avez juste besoin d'animer votre aiguille sur chaque image.

    Premier lien a changé: developer.mozilla.org/en-US/docs/Canvas_tutorial/Drawing_shapes
    Le premier lien a changé, encore une fois: developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/...

    OriginalL'auteur Ivo Wetzel

  2. 2

    Réponse Simple: Redessiner la toile avec de l'angle droit.

    Contexte d'utilisation.clearRect() ou de l'ensemble de la toile largeur à la même valeur (de la modifier à n'importe quelle valeur sera effacer de la toile);

    Il est rapide et il n'y a aucun moyen de déplacer l'aiguille.
    Toutes en toile de choses sont à construire de cette façon.

    Tirage au sort. Le changement? Redessiner.

    OriginalL'auteur shfx

  3. 1

    Que vous utilisez un arrière-plan statique de l'image et uniquement l'aiguille est dynamique, vous pouvez simplement utiliser plusieurs toiles. Positionnez-les sur le dessus de chaque autre à l'aide de css. Ajouter le tachymètre image de la toile dans le dos. Appliquer l'aiguille de script pour le haut de la toile. De cette façon, vous n'avez pas à redessiner l'image à chaque fois que vous mettez à jour l'aiguille. Et comme les autres réponses expliquer redessiner les moyens idée claire du contexte et de tirer l'aiguille de nouveau.

    OriginalL'auteur Jasper Moelker