javascript - html5 canvas - 如何拉伸(stretch)文本？

Question

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

那么有没有办法水平拉伸(stretch)/压缩文本？ (就像在 PhotoShop 中一样)

比如将它转换为图像然后改变图像的宽度？不确定这是否是最好的方法...

谢谢

Answer 1

您可以先使用measureText 确定文本的大小，然后根据需要缩放 Canvas :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();
}