gpt4 book ai didi

javascript - js canvas - 使用特定文本权重计算文本宽度

转载 作者:太空宇宙 更新时间:2023-11-04 01:30:17 24 4
gpt4 key购买 nike

我目前正在使用以下代码来计算文本宽度:

function measureWordSize(word, font) {
var canvas = measureWordSize.canvas || (measureWordSize.canvas = document.createElement("canvas"));
var context = canvas.getContext("2d");
context.font = font;
var metrics = context.measureText(word);
return metrics.width;
}

哪个工作正常,但是 font属性必须是格式如下的字符串:[italic] [bold] <font-size> <font-family> .

我想用某个 text-weight 来计算文本的宽度, 并将字体设置为 700px <font-size> <font-family>不起作用。 MDN没有说任何关于数字 text-weight 的事情.

如何计算带有数字 text-weight 的元素的文本宽度?

最佳答案

context.font 接受与 CSS 相同的格式 font速记属性。

取自MDN

/* size | family */
font: 2em "Open Sans", sans-serif;

/* style | size | family */
font: italic 2em "Open Sans", sans-serif;

/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/3 cursive;

/* style | variant | weight | stretch | size/line-height | family */
font: italic small-caps bolder condensed 16px/3 cursive;

所以你也可以设置font-weight作为数字刻度,就像使用 CSS 一样:

const ctx = canvas.getContext('2d');
const str = "I'm bold";
// set the font as numeric-font-weight | font-size | font-name
ctx.font = '700 16px sans-serif';
console.log('bold:', ctx.measureText(str).width);

ctx.fillText(str, 0, 20)
// reset to normal font-weight
ctx.font = '400 16px sans-serif';
console.log('medium:', ctx.measureText(str).width);
<canvas id="canvas"></canvas>

关于javascript - js canvas - 使用特定文本权重计算文本宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47253435/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com