Javascript Girl
  1. Javascript Girl
  3. Comment dessiner du texte sur une balise <canvas> dans Safari
Intereting Posts
API Javascript Scorm 1.2 Comment puis-je exécuter un script uniquement pour IE 8 Redirection de la page html si vous ne vous connectez pas Comment modifier le contenu d'une <textarea> avec Javascript Persister une session basée sur les cookies via node-http-proxy Comment résoudre la dépendance circulaire dans Require.js? Comment intégrer l'ipcRenderer électronique dans l'application Angular 2 basée sur TypeScript? AngularJS: lance les demandes POST et passe chaque indice dans une réponse connexe Ember.js RC1 reçoit le nom de l'itinéraire Exemple de code pour C # et Javascript SHA256 hashing L'événement "backbutton" ne déclenchera pas Impossible de se lier à 'formControl' car il ne s'agit pas d'une propriété connue de 'input' – matériau angular2 Problème d'autocomplete Impossible de capturer Google Map avec html2canvas Comment puis-je construire une chaîne de modèle à partir d'une chaîne régulière? Comment puis-je persister une carte ES6 dans localstorage (ou ailleurs)?

Comment dessiner du texte sur une balise <canvas> dans Safari

J'ai expérimenté l'utilisation de la <canvas> pour dessiner des diagrammes simples et des graphiques, et jusqu'à présent, il est assez facile de travailler avec. J'ai pensé à un problème. Je ne peux pas comprendre comment dessiner du texte sur un <canvas> dans Safari. Dans Firefox 3.0, je peux le faire: 

 Chart.prototype.drawTextCentered = function(context, text, x, y, font, color) { if (context.mozDrawText) { context.save(); context.fillStyle = color; context.mozTextStyle = font; x -= 0.5 * context.mozMeasureText(text); context.translate(x, y); context.mozDrawText(text); context.restore(); } }

J'ai vu une référence à une méthode fillText() dans les documents Safari d'Apple, mais cela ne semble pas être pris en charge dans Safari 3.2. Est-ce que c'est juste quelque chose qui manque actuellement, ou est-ce un secret bien gardé?

Je ne crois pas que Safari 3.2 prend en charge le rendu du texte dans la toile.

Selon ce blog , Safari 4 beta prend en charge le déchiffrement du texte sur la toile, en fonction des API de texte en toile HTML 5 .

Edit : J'ai confirmé que l'extrait suivant fonctionne dans Safari 4 beta: 

 <canvas id="canvas"></canvas> <script> var context = document.getElementById("canvas").getContext("2d"); context.fillText("Hello, world!", 10, 10); </script>

Ce n'est pas idéal, et il semble que vous attendiez bien, mais pour référence, il existe une bibliothèque appelée strokeText qui fait son propre rendu de police. Il fonctionne dans Firefox 1.5+, Opera 9+, Safari (je ne sais pas quelles versions) et IE6 + (en utilisant VML au lieu de la toile).

Si vous voulez vraiment utiliser les méthodes de texte HTML5, vous devriez essayer cette bibliothèque: http://code.google.com/p/canvas-text/

Et les démos sont ici: http://canvas-text.googlecode.com/svn/trunk/examples/index.html

Il est toujours en phase alpha, donc tout rapport de bug et commentaires sont les bienvenus! 🙂

J'utilise la balise <canvas> pour dessiner le logo Facebook, mais l'image, le texte est étiré. 

 <div class="content1"> <canvas id = "e" class="myCanvas"> <script> var canvas = document.getElementById("e"); var context = canvas.getContext("2d"); context.fillStyle = "white"; context.font = "normal 64px Facebook Letter Faces"; context.fillText("facebook",10, 100); </script> FACEBOOK </canvas> </div>

Fichier CSS: 

 .content1 { float:left; position:relative; width:180px; height:120px; } .myCanvas { float:right; position:relative; width:170px; height:60px; margin-right:5px; margin-top:70px; background-color:#044692; }