javascript – html5 canvas – 如何拉伸文本？

发布时间：2020-12-14 23:03:50 所属栏目：资源来源：网络整理

导读：在我的html 5画布中,我绘制文本(必须在1行),但它需要是一个恒定的字体大小和样式,我所拥有的空间的宽度也是不变的.因此,文本需要适合该空间,但是当文本太长并经过空间时会出现问题. 那么我可以横向拉伸/压缩文本吗？ (比如PhotoShop) 像将其转换为图像然后改

在我的html 5画布中,我绘制文本(必须在1行),但它需要是一个恒定的字体大小和样式,我所拥有的空间的宽度也是不变的.因此,文本需要适合该空间,但是当文本太长并经过空间时会出现问题.

那么我可以横向拉伸/压缩文本吗？ (比如PhotoShop)

像将其转换为图像然后改变图像的宽度？不确定这是不是最好的方式……

谢谢

最佳答案

您可以使用measureText首先确定文本的大小,然后根据需要缩放画布：http://jsfiddle.net/eGjak/887/.

var text = "foo bar foo bar";
ctx.font = "30pt Arial";

var width = ctx.measureText(text).width;
if(width <= 100) {
    ctx.fillText(text,100);
} else {
    ctx.save();
    ctx.scale(100 / width,1);
    ctx.fillText(text,100);
    ctx.restore();
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!