Как установить ширину холста по ширине объектов холста / текста - PullRequest
Новая
       10

Как установить ширину холста по ширине объектов холста / текста

2 голосов
/ 21 января 2020

Я работаю с очень простой настройкой холста, я добавляю текст к <canvas>. Ширина текста может варьироваться, и я не хочу устанавливать ширину холста для текста самой длинной длины. Я хотел бы автоматически изменить размер холста в зависимости от длины текста.

Я видел это 

canvasContext.measureText(textVariable).width

И я использую его, как если бы я изменял стиль на любом элементе . 

canvas3.style.width = canvasContext.measureText(textVariable).width + "px"

Но это не работает. Размер текста уменьшается, но холст остается прежним.

Я на правильном пути, что не работает правильно или есть лучшее решение?

РЕДАКТИРОВАТЬ: Что касается моей проблемы уменьшения размера текста, я менялся ширина и высота в CSS. Я должен был изменить атрибут холста следующим образом: 

 canvas3.setAttribute('width', '438');
 canvas3.setAttribute('height', '462');

Мой базовый код: 

const canvas3 = document.getElementById("myCanvas3");
const canvasContext = canvas3.getContext("2d");
const fontColor = 'red';
const textVariable = "COPY IS HERE"

canvasContext.font = "600 40px Proxima-nova";
canvasContext.fillStyle = fontColor;
canvasContext.textAlign = "left";
canvasContext.fillText(textVariable, 0, canvas3.height - 1);
#myCanvas3 {
    background-color:#fafafa;
    width:240px;
    height:30px;
}
<canvas id="myCanvas3"
    width="240"
    height="30"
></canvas>

1 Ответ

1 голос
/ 21 января 2020

Сначала вы определяете размеры шрифта на экземпляре canvas.

Затем вы изменяете размер элемента dom canvas с помощью атрибута width. Это приведет к «перезагрузке» холста, поэтому, если у вас что-то нарисовано, вам нужно перерисовать это. Также установите ширину с помощью атрибута style, чтобы получить «реально больший» холст.

Затем вы рисуете текст так, как планировали, снова устанавливая размер шрифта, как это было стерто при сбросе. 

const canvas3 = document.getElementById("myCanvas3");
const canvasContext = canvas3.getContext("2d");
const fontColor = 'red';
const textVariable = "COPY IS HERE"

canvasContext.font = "600 40px Proxima-nova";
canvasContext.fillStyle = fontColor;
canvasContext.textAlign = "left";
canvasContext.fillText(textVariable, 0, canvas3.height - 1);
window.setTimeout(() => {
  canvas3.width = canvasContext.measureText(textVariable).width;
  canvas3.style.width = canvas3.width + 'px';
  canvasContext.font = "600 40px Proxima-nova";
  canvasContext.fillStyle = fontColor;
  canvasContext.textAlign = "left";
  canvasContext.fillText(textVariable, 0, canvas3.height - 1);
},5000);
#myCanvas3 {
  background-color:#fafafa;
  width:240px;
  height:30px;
}
Bigger canvas that can fit the text showing up in 5 seconds.<BR/>
<canvas id="myCanvas3"
        width="240"
        height="30"
></canvas>
...