缩放文本以填充HTML5画布的最佳方法 [英] Best method of scaling text to fill an HTML5 canvas

问题描述

我需要'缩放'文本来填充反HTML5画布。似乎scale（）方法不会影响文本。我已经在measureText（）方法上看到了迭代循环的近似方法，但这并没有让我得到我需要的东西。理想情况下，我想在不保留纵横比的情况下水平和垂直填充。 SVG可能会帮助解决这个问题吗？

I need to 'scale' text to fill an antire HTML5 canvas. It appears that the scale() method does not affect text. I've seen approximation methods with iterative loops on the measureText() method but this doesn't get me exactly what I need. Ideally I'd like to fill both horizontally and vertically without conserving the aspect ratio. Would SVG possibly be able to help with this?

推荐答案

我的错误 - 规模DOES适用于文本。我想出了一个解决方案：

My bad - Scale DOES apply to text. I've come up with a solution:

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

这篇关于缩放文本以填充HTML5画布的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！