Не удалось добавить пользовательский шрифт для рисования с помощью HTML 5 Canvas

#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 определяется как ноль вверху. В любом случае, спасибо!!