縮放文本以填充HTML5畫布的最佳方法

Question

我需要「縮放」文本以填充抗鋸齒的HTML5畫布。看起來scale（）方法不會影響文本。我已經看到了在measureText（）方法上使用迭代循環的近似方法，但這並不能完全滿足我的需求。理想情況下，我想在不保存縱橫比的情況下橫向和縱向進行填充。 SVG可能能夠提供幫助嗎？

Answer 1

我的壞 - 規模實際上適用於文本。我想出了一個解決方案：

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); 

Answer 2

比例會影響文本。試試這個：

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/