html5画布-如何拉伸文本

html5 canvas - How can I stretch text?

本文关键字：何拉伸 文本 画布 html5      更新时间：2023-09-26

在我的html 5画布中，我绘制文本（必须在一行上），但它需要是恒定的字体大小和样式，并且我的空间宽度也是恒定的。因此，文本需要适合该空间，但当文本过长并超出该空间时，就会出现问题。

那么，有没有一种方法可以水平拉伸/压缩文本？（如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, 0, 100);
} else {
    ctx.save();
    ctx.scale(100 / width, 1);
    ctx.fillText(text, 0, 100);
    ctx.restore();
}

一个简单的解决方案是在另一个（内存中）画布中绘制文本，然后使用drawImage将画布内容粘贴到真实的目标画布中。

类似这样的东西（根据您的需求，可以对其进行参数化，这里的拉伸比例为100到80）：

var tempimg = document.createElement('canvas');
tempimg.width = 100;
tempimg.height = 10;
oc = tempimg.getContext('2d');
oc.fillText(...)
yourdestcontext.drawImage(tempimg, 0, 0, 100, 10, x, y, 80, 10);
相关文章：