JavaScript Соотношение текста холста - PullRequest
Новая
       34

JavaScript Соотношение текста холста

2 голосов
/ 30 марта 2020

У меня есть холст фиксированного размера (850x400px), и когда я добавляю текст на этот холст, он странным образом масштабируется, и я не знаю почему.

Если я не установил холст с указанием c высота / ширина, текст выглядит нормально, почему это так? 

export function addText() {
  var canvas = document.getElementById("canvas"); // 850x400px
  var ctx = canvas.getContext("2d");
  var y = 1 * 20 + 20;

  var text = {
    text: "ABC",
    x: 20,
    y: y
  };

  ctx.font = "40px consolas";
  text.width = ctx.measureText(text.text).width;
  text.height = 80;
  ctx.fillText(text.text, text.x, text.y);
}

Вот как будет выглядеть текст в поле холста:

enter image description here

Как вставить текст, масштабированный как обычный шрифт 40px?

Ответы [ 2 ]

2 голосов
/ 30 марта 2020

Я думаю, вы не указали ширину и высоту холста HTML Сам элемент, попробуйте: 

addText();

function addText() {
  var canvas = document.getElementById("canvas"); // 850x400px
  var ctx = canvas.getContext("2d");
  var y = 1 * 20 + 20;

  var text = {
    text: "ABC",
    x: 20,
    y: y
  };

  ctx.font = "40px consolas";
  text.width = ctx.measureText(text.text).width;
  text.height = 80;
  ctx.fillText(text.text, text.x, text.y);
}
<canvas id="canvas" width="850" height="400" style="background: red"></canvas>

Обновление

Другим вариантом является программная установка ширины и высоты, это предотвратит увеличение: 

let canvas = document.getElementById("canvas");

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

Я использовал ширину и высоту окна, но любой другой элемент сделает это.

0 голосов
/ 30 марта 2020

Это выглядит хорошо для меня ...
См. Пример кода ниже: 

function addText() {
  var canvas = document.getElementById("canvas"); // 850x400px
  var ctx = canvas.getContext("2d");
  var text = {text: "ABC", x: 20, y: 40};

  ctx.font = "40px consolas";
  text.width = ctx.measureText(text.text).width;
  text.height = 80;
  ctx.fillText(text.text, text.x, text.y);
}

addText()
<canvas id="canvas"></canvas>

вы должны делать css для этого холста ...
возможно, стиль - тот, который задает c высота / ширина , но в этом случае все будет масштабировано, а не только текст, попробуйте нарисовать квадрат и кружок посмотреть, как они выглядят.

...