JavaScript Canvas 文字比例
JavaScript Canvas Text Ratio
我有一个固定大小的 Canvas (850x400px),当我向这个 canvas 添加文本时,它以一种奇怪的方式放大,我不知道为什么。
如果我没有将 canvas 设置为特定的 height/width,文本显示正常,这是为什么?
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);
}
canvas 字段中的文本如下所示:
如何插入像普通 40px 字体一样缩放的文本?
我想你还没有指定 canvas 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;
我使用了 window 宽度和高度,但任何其他元素都可以。
我有一个固定大小的 Canvas (850x400px),当我向这个 canvas 添加文本时,它以一种奇怪的方式放大,我不知道为什么。
如果我没有将 canvas 设置为特定的 height/width,文本显示正常,这是为什么?
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);
}
canvas 字段中的文本如下所示:
如何插入像普通 40px 字体一样缩放的文本?
我想你还没有指定 canvas 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;
我使用了 window 宽度和高度,但任何其他元素都可以。