#javascript #html5-canvas
Вопрос:
Поэтому я пытаюсь загрузить пользовательский шрифт, чтобы использовать текст заголовка на моем HTML-холсте.
Так вот что я попробовал. У меня есть функция рендеринга, которая рисует весь текст.
Я хочу решить все задачи рендеринга внутри класса. Поэтому я сделал это:
class ResultSegment {
// Information properties.
segmentTitle = "";
// Drawing specifications. Should be overwritten.
x = 0;
y = 0;
w = 100;
y = 100;
fontReferenceValueEM = 3;
/**
* Draws the segment values.
*/
render(ctx) {
ctx.fillStyle = "#eeeeee";
ctx.fillRect(this.x,this.y,this.w,this.h);
// Font color
ctx.fillStyle = "#505150";
let f = new FontFace('TitleFont', 'url(assets/fonts/GothamBold.otf)');
f.load().then(this.drawTitle(ctx));
}
drawTitle(ctx){
// Ready to use the font in a canvas context
ctx.textBaseline = "top";
ctx.font = this.fontReferenceValueEM "em TitleFont"
ctx.fillText(this.segmentTitle,this.x,this.y);
}
}
Я не получаю никаких ошибок (в консоли браузера, я имею в виду), но шрифт не загружен, или я называю его неправильно. При использовании titleFont или serif используется точно такой же шрифт (по умолчанию).
В случае, если это не было очевидно, ctx-это 2D-контекст объекта canvas.
Что я делаю не так?
Комментарии:
1. Первое, что я замечаю, — это ты
fillRect()
с этим.h, но у тебя нет этого. h в конструкторе. Ты использовал это. у дважды. Не уверен, что это единственная проблема, первая заметная проблема без запуска кода.2. Вы правы насчет ч. Но код все равно работал, потому что они установлены в другом месте. Y определяется как ноль вверху. В любом случае, спасибо!!