Comment puis-je utiliser des polices personnalisées dans un élément HTML5 Canvas?

J'ai regardé des choses comme Cufon et typeface.js mais ils semblent être SIFR alternatives et ne permettent pas le jeu libre coordonne et de tirage de type personnalisé sur un <canvas>

Quelqu'un a des idées?

InformationsquelleAutor jdee | 2010-04-09
  1. 89

    J'ai lancé une simple démo sur jsfiddle ici montrer comment faire cela avec @font-face: http://jsfiddle.net/zMKge/

    L'opéra a également un tutoriel simple sur l'utilisation de <canvas>, y compris le texte de l'API.

    CSS:

    @font-face {
    font-family: 'KulminoituvaRegular';
    src: url('http://www.miketaylr.com/f/kulminoituva.ttf');
}

    Javascript:

    var ctx = document.getElementById('c').getContext('2d');
var kitty = new Image();
kitty.src = 'http://i954.photobucket.com/albums/ae30/rte148/891blog_keyboard_cat.gif';
kitty.onload = function(){
  ctx.drawImage(this, 0,0,this.width, this.height);
  ctx.font         = '68px KulminoituvaRegular';
  ctx.fillStyle = 'orangered';
  ctx.textBaseline = 'top';
  ctx.fillText  ('Keyboard Cat', 0, 270);
};
    • edit: aucun workee dans firefox.... bien dans chrome. il n'y a pas de croix
    • Être conscient de ce problème, cependant : stackoverflow.com/questions/2756575/...
    • Firefox parce que le navigateur est très strict sur sa politique de " même origine. Les étoiles ont à aligner et de l'image, la police, et de la page web doit être sur le même domaine
    • Cela ne fonctionne pas avec google Chrome 21, mais fonctionne sur FF 7, 12 et 15. Le tout sur Windows 7.
    • Cela ne fonctionne pas (fiable) sur la BlackBerry Playbook navigateur. Au mieux, il fonctionne lors de l'actualisation de la page; parfois, la police ne montre pas du tout.
    • Cela ne fonctionne pas du tout sur Safari 6.0.5 ou Chrome 27.0.1453.116, à la fois du système d'exploitation OS X 10.8.4. Safari comportement lors d'une indisponibilité de la police de caractères utilisée est de ne rien afficher; Chrome utilise Arial.
    • Je ne pouvais pas obtenir que JSFiddle de travail donc j'ai mis à jour à l'aide de Google Webfont. jsfiddle.net/zMKge/2171
    • Ne fonctionne pas dans firefox 🙁 ..

    InformationsquelleAutor miketaylr
  2. 5

    J'ai juste répondu à cette question ici: La précontrainte de la police HTML5, JS, Kinetic.js?

    L'essentiel:

    @font-face {
    font-family: 'myfont';
    src: url('myfont.eot');
    src: url('myfont.eot?#iefix') format('embedded-opentype'),
         url('myfont.woff') format('woff'),
         url('myfont.ttf') format('truetype'),
         url('myfont.svg#myfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

    Il ne devrait pas d'importance si vous utilisez KineticJS ou pas, la seule différence sans KineticJS est que vous pouvez éventuellement créer de l'élément Canvas directement avec le HTML au lieu d'utiliser une couche div conteneur. Après tout KineticJS crée juste un normal Toile élément dans le conteneur.

    • Alors que ce lien peut répondre à la question, il est préférable d'inclure les parties essentielles de la réponse et de fournir le lien de référence. Lien-ne répond peut devenir non valide si la page liée changements.
    • dans ce cas, l'id de dire que c'est ok, parce que c'liens de stackoverflow 😉 - mais je vais inclure la partie essentielle.
    InformationsquelleAutor luschn