Блог

Главная - Вопросы по программированию - Невозможно одновременно установить ширину холста и изменить шрифт?

Невозможно одновременно установить ширину холста и изменить шрифт?

#javascript #css #html5-canvas

#javascript #css — код #html5-холст

Вопрос:

http://jsfiddle.net/sLk72mud/

В jsfiddle, вызов measureText, который задает ширину холста:

 tCtx.canvas.width = tCtx.measureText(this.value).width;

перезаписывает размер шрифта:

 tCtx.font = "25px serif"

Если я удалю вызов measureText , то холст будет использовать размер шрифта, который я ожидаю. К сожалению, тогда мне приходится гадать, какой ширины должен быть мой холст. Почему это так и есть ли лучший способ сделать это?

Ответ №1:

Изменение размеров холста также сбрасывает контекст. Вам нужно будет снова установить шрифт (и любые другие настройки, отличные от настроек по умолчанию) после изменения размера.

    tCtx.font = 'bold 24px serif';
   tCtx.canvas.width = tCtx.measureText(this.value).width;
   tCtx.font = 'bold 24px serif';
   tCtx.fillText(this.value, 0, 10);

Сохраненные состояния (через .save() / .restore() ) также теряются при изменении размера. Если вы ожидаете внести ряд изменений в состояние холста, вы можете разбить их на свои собственные .save() / .restore() функции.

Ответ №2:

просто переместите оператор tCtx.font непосредственно перед оператором fillText

    tCtx.canvas.width = tCtx.measureText(this.value).width;
   tCtx.font = 'bold 24px serif';
   tCtx.fillText(this.value, 0, 10);

Комментарии:

1. Но тогда .measureText() используется старая настройка шрифта или шрифта по умолчанию.

2. я. Вам нужно определить его дважды: один перед изменением размера и один после изменения размера