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

75

Ich habe mir Dinge wie Cufon und typeface.js angesehen, aber sie scheinen SIFR-Alternativen zu sein und erlauben Ihnen nicht, Freiformkoordinaten festzulegen und benutzerdefinierte Typen auf a zu zeichnen <canvas>

Hat jemand irgendwelche Ideen?

jdee
quelle

Antworten:

95

Ich habe hier eine einfache Demo zu jsfiddle zusammengestellt, die zeigt, wie das mit @ font-face geht: http://jsfiddle.net/zMKge/

Opera hat auch ein einfaches Tutorial zur Verwendung <canvas>, 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);
};
miketaylr
quelle
6
Beachten
Sie jedoch
3
Das Firefox-Problem liegt darin, dass der Browser seine Richtlinien für denselben Ursprung sehr streng einhält. Sterne müssen ausgerichtet sein und Bild, Schriftart und Webseite müssen sich ALLE auf derselben Domain befinden
Chris Bosco
Dies funktioniert nicht in Chrome 21, aber unter FF 7, 12 und 15. Alle unter Windows 7.
Charlotte
Dies funktioniert im BlackBerry Playbook-Browser nicht (zuverlässig). Bestenfalls funktioniert es beim Aktualisieren der Seite; Manchmal wird die Schrift überhaupt nicht angezeigt.
Ted Hopp
5
Ich konnte diese JSFiddle nicht zum Laufen bringen und habe sie mithilfe eines Google Webfont aktualisiert. jsfiddle.net/zMKge/2171
Francisc0
6

Ich habe diese Frage gerade hier beantwortet: Laden Sie die Schriftart HTML5, JS, Kinetic.js vor.

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 spielen, ob Sie KineticJS verwenden oder nicht. Der einzige Unterschied ohne KineticJS besteht darin, dass Sie das Canvas-Element möglicherweise direkt mit HTML erstellen würden, anstatt eine div-Ebene als Container zu verwenden. Schließlich erstellt KineticJS in diesem Container nur ein normales Canvas-Element.

luschn
quelle
Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen. Nur-Link-Antworten können ungültig werden, wenn sich die verknüpfte Seite ändert.
Josh Burgess
2
in diesem Fall würde ich sagen, dass es in Ordnung ist, weil es mit dem Stackoverflow verknüpft ist;) - aber ich werde den wesentlichen Teil einbeziehen.
Luschn