web-dev-qa-db-fra.com

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 elles semblent être des alternatives SIFR et ne vous permettent pas de définir des coordonnées de forme libre et de dessiner un type personnalisé sur un <canvas>

Quelqu'un a une idée?

html5canvasfontscufontypeface.js
70
jdee

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

Opera a également un tutoriel simple sur l'utilisation de <canvas>, y compris l'API de 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);
};
91
miketaylr

Je viens de répondre à cette question ici: Preload font 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;
}

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

5
luschn