text - 缩放文本以填充 HTML5 Canvas 的最佳方法

Question

我需要“缩放”文本以填充旧的 HTML5 Canvas 。 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);