Как я могу использовать пользовательские шрифты в элементе Холста HTML5?

Question

Как я могу использовать пользовательские шрифты в элементе Холста HTML5?

Я посмотрел на вещи как Cufon и typeface.js, но они, кажется, альтернативы SIFR и не позволяют Вам устанавливать координаты свободной формы и тянуть пользовательский тип на a <canvas>

Кто-либо получил какие-либо идеи?

71

html5 canvas fonts cufon typeface.js

задан VividD 5 February 2014 в 17:36

1 ответ

Другие вопросы по тегам:

html5 canvas fonts cufon typeface.js

Похожие вопросы:

score 91 · Accepted Answer

Я собрал здесь простую демонстрацию на jsfiddle, показывающую, как это сделать с помощью @ font-face: http://jsfiddle.net / zMKge /

В Opera также есть простое руководство по использованию , включая текстовый 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);
};