html5 canvas - 如何拉伸文本？

Question

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

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

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

谢谢

Answer 1

您可以先使用它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();
}

Answer 2

一个简单的解决方案是在另一个（在内存中）画布中绘制文本，然后使用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);