Javascript Girl
  1. Javascript Girl
  3. L'image clignote lorsque la souris se déplace dans un canevas HTML
Intereting Posts
L'erreur angulaire JS "SCRIPT5007: objet attendu" dans IE9 et IE10 lors du chargement de la bibliothèque angulaire Limiter les symboles de la zone de texte à la partie visible Comment obtenir des données de {$$ state: Object}? Suppression d'éléments dynamiques et réorganisation de ces éléments Valeurs et ID Filereader api sur les gros fichiers Création d'une fenêtre modale pour charger des données avec AngularJS Utilisation requise avec des chemins relatifs Comment afficher un spinner pendant le chargement d'une image via JavaScript Three.js Comment obtenir la position d'un maillage? XMLHttpRequest Level 2 – Déterminé si le téléchargement est terminé Remplacer les caractères de citation par de meilleurs Lier aux événements dans l'iframe créé dynamiquement La demande de publication JavaScript a été soumise comme formulaire Bouclage par des pixels dans une image Masquer la barre d'adresse dans Safari mobile lors du défilement (touchOverflow)

L'image clignote lorsque la souris se déplace dans un canevas HTML

J'ai déjà regardé dans ce thread 1 et thread 2 , mais j'ai toujours le scintillement lorsque la souris se déplace.

Mon code: 

function draw(){ var img = new Image(); img.src = "/Sample/Icons/sample.png"; img.onload = function () { ctx.drawImage(img, X1, Y1, 25, 25); }; }

J'espère que quelqu'un peut me donner une idée ou une solution sur la façon de résoudre mon problème de scintillement.

Je suppose que vous appelez le draw pour chaque mousemove.

Les événements Mousemove se produisent environ 30 fois par seconde, donc il n'y a pas assez de temps pour charger une image dans un gestionnaire de mousemove.

Au lieu de cela, chargez l'image une fois au début de votre application.

Alors ctx.drawImage a suffisamment de temps pour dessiner cette image préchargée pendant chaque événement mousemove.