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

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

在我的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();}

总结

以上是内存溢出为你收集整理的javascript – html5 canvas – 如何拉伸文本？全部内容，希望文章能够帮你解决javascript – html5 canvas – 如何拉伸文本？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。