Javascript Girl
  1. Javascript Girl
  3. Le texte est grillé / flou lors du dessin du texte sur une toile via onload
Intereting Posts
Pouvez-vous choisir les caractéristiques de ES6 à transporter avec Babel? Comment faire pour que le remplissage du modèle d'image SVG se déplace avec un objet? Existe-t-il un moyen de détecter si un utilisateur est sur une connexion wifi avec php ou javascript? Le bouton Partager Twitter À la recherche de JS / JQuery SUPPLÉMENT Modulaire couche Les guidons ne remplissent pas le tableau Est-il possible d'écraser la fonction window.location avec une fonction personnalisée? Javascript: comment intercepter le changement de fenêtre. Ce que signifie ce point d'interrogation dans Flow: "? () => Void" Comment synchroniser correctement une fonction en JavaScript? Le point-virgule manquant dans JavaScript provoque "" foo "est indéfinie" erreur dans IE9 Instantané Chrome Heap – Pourquoi ne pas afficher toute la mémoire allouée? Ouvrir Sélectionnez avec Javascript / jQuery? Récupération des noms de fichiers hors d'un contrôle de téléchargement multi-fichiers avec javascript Intégrer Google Maps Place Form dans le formulaire d'adresse autocomplete javascript

Le texte est grillé / flou lors du dessin du texte sur une toile via onload

Si j'essaie de dessiner du texte sur mon canevas lors de l'événement onload, le texte apparaît flou. Je dessine sur la même toile plus tard via un clic de bouton d'une autre fonction et c'est bien. Mais si j'appelle cette fonction à partir du bouton, il est encore flou. Quelqu'un peut-il voir quelque chose de mal dans ce code? 

window.onload = initCanvasRender; function initCanvasRender() { var c = document.getElementById("canvas"); var ctx = c.getContext('2d'); ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = 'black'; ctx.font = '20px Times New Roman'; ctx.fillText('hello...', c.width/2, c.height/2); }

Il peut y avoir un problème avec le 

 ctx.fillText('hello...', c.width/2, c.height/2);

Parce que si, par exemple, vous définissez la largeur du canevas avec css, alors c.width et c.height seront la taille par défaut du canevas qui est, 300×150 et pas la taille définie dans css. Essayez de définir deux variables pour la largeur et la hauteur qui sont globales pour votre application. Par exemple 

 var canvasWidth = 400px; var canvasHeight = 200px; c.width = canvasWidth; c.height = canvasHeight; /* ... */

Et plus tard dans votre code, vous pouvez utiliser canvasWidth et canvasWeight : 

 ctx.fillText('hello...', canvasWidth/2, canvasHeight/2);

Jetez un oeil à ce test: http://jsfiddle.net/EsQfb/7/ il est important d'utiliser utiliser la canvas.width et pas canvas.style.width dans votre cas.

Regardez ceci pour plus d'informations à ce sujet: http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#attr-canvas-width