缩放文本以填充HTML5画布的最佳方法

我需要“缩放”文本以填充抗锯齿的HTML5画布。看起来scale（）方法不会影响文本。我已经看到了在measureText（）方法上使用迭代循环的近似方法，但这并不能完全满足我的需求。理想情况下，我想在不保存纵横比的情况下横向和纵向进行填充。 SVG可能能够提供帮助吗？缩放文本以填充HTML5画布的最佳方法

来源

2010-11-06 Weezelboy

所以，如果你有五个字符和宽度为19像素的画布，你希望你的文本填充整个画布（不仅15px）？ – thejh 2010-11-06 16:50:27

我的坏 - 规模实际上适用于文本。我想出了一个解决方案：

context.font = "20px 'Segoe UI'"; 
var metrics = context.measureText("Testing!"); 
var textWidth = metrics.width; 

var scalex = (canvas.width/textWidth); 
var scaley = (canvas.height/23); 

var ypos = (canvas.height/(scaley * 1.25)); 

context.scale(scalex, scaley); 
context.fillText("Testing!", 0, ypos);

来源

2010-11-10 16:57:10 Weezelboy

如果你在一个循环中运行它，请记住在变换之前使用'context.save（）'和在之后使用'context.restore（）'（最好在finally块中）。 – aboveyou00 2017-07-14 02:18:43

比例会影响文本。试试这个：

var can = document.getElementById('test'); 
var ctx = can.getContext('2d'); 

ctx.fillText("test", 10,10); // not scaled text 


ctx.scale(3,3); 
ctx.fillText("test", 10,10); // scaled text

看到它在这里的行动： http://jsfiddle.net/3zeBk/8/

来源

2010-11-08 02:36:41

缩放文本以填充HTML5画布的最佳方法

回答

相关问题