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

Question

Je l'ai regardé des choses comme Cufon et typeface.js, mais ils semblent être des alternatives SIFR et ne vous permettent pas de définir les coordonnées et freeform dessiner type personnalisé sur un <canvas>

Quelqu'un at-il des idées?

Answer 1

Je l'ai jeté ensemble une simple démo sur jsFiddle montrant ici comment faire avec font-face @: http: //jsfiddle.net/zMKge/

Opera dispose également d'un simple, tutoriel sur l'utilisation <canvas>, y compris la API texte.

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);
};

Answer 2

Je viens de répondre à cette question ici: préchargement police HTML5, JS , Kinetic.js

La partie essentielle:

@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 non, la seule différence est sans KineticJS que vous peut créer l'élément Canvas directement avec HTML au lieu d'utiliser une couche div comme conteneur. Après tout KineticJS crée juste un élément normal de toile dans ce conteneur.