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/

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

2 个答案: