Wie kann ich benutzerdefinierte Schriftarten in einem HTML5-Canvas-Elemente verwenden?

Question

Ich habe an Dinge wie Cufon sah und typeface.js aber sie scheinen SIFR Alternativen zu sein und erlauben Sie nicht Set Freiform Koordinaten und benutzerdefinierten Typ auf einen <canvas> ziehen

got Wer irgendwelche Ideen?

Answer 1

Ich habe zusammen eine einfache Demo auf jsfiddle hier geworfen zeigen, wie dies zu tun mit @ font-face: http: //jsfiddle.net/zMKge/

Opera hat auch eine einfaches Tutorial auf <canvas> verwenden, einschließlich der Text-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);
};

Answer 2

Ich habe geantwortet nur diese Frage hier: Preload Schrift HTML5, JS , Kinetic.js?

Der wesentliche Teil:

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

Es sollte keine Rolle, ob Sie KineticJS verwenden oder nicht, der einzige Unterschied ohne KineticJS ist, dass Sie möglicherweise das Canvas-Element direkt mit HTML anstelle der Verwendung einer div Schicht als Behälter schaffen würden. Nachdem alle KineticJS schafft nur ein normales Canvas-Element in diesem Container.