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

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

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

Opera a aussi un tutoriel simple sur l'utilisation <canvas>, y compris l'API texte, mais je suis pas assez cool pour avoir deux hyper-liens. :)

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: Preload font 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; 
} 

Peu importe que vous utilisiez KineticJS ou non, la seule différence sans KineticJS est que vous pourriez créer l'élément Canvas directement avec HTML au lieu d'utiliser un calque div comme conteneur. Après tout, KineticJS crée simplement un élément Canvas normal dans ce conteneur.