基于画布大小的HTML5 Canvas字体大小

Question

我将画布大小设置为window.innerHeight和window.innerWidth浏览器的1/3.

画布上的大多数元素也是根据画布的宽度和高度设置的,因此它们可以按比例缩小,并根据画布的大小进行定位.

如何基于此缩放字体大小？

例如,我正在制作的游戏的开场画面的字体大小是80pt.如果浏览器非常小,那就太大了.它离开画布.

Answer 1

简单地font-size用一个因子来缩放.

基础

让我们说你的画布默认大小是1000像素,字体大小是80像素(画布将pt转换为像素 - 80为简单起见,我在这里使用,见底部).

那将创造一种关系:

ratio = 80 / 1000 = 0.08

让我们通过乘以该比率来验证画布宽度是否为1000:

fontSize = 1000 * ratio = 80;

我们看到我们有80个字体符合预期.

既然画布尺寸较小,可以说500像素:

fontSize = 500 * ratio = 40;

这应该与关系相对应.请注意,字体的行为不像那样线性,但它大致正确.

现在只需设置字体大小:

ctx.font = (fontSize|0) + 'px myFont';

解

这个的最终代码本质上非常简单:

var fontBase = 1000,                   // selected default width for canvas
    fontSize = 70;                     // default size for font

function getFont() {
    var ratio = fontSize / fontBase;   // calc ratio
    var size = canvas.width * ratio;   // get font size based on current width
    return (size|0) + 'px sans-serif'; // set font
}

每次需要更新字体(即调整大小)时,只需调用:

ctx.font = getFont();                  // call getFont to set new font size

默认值是当前/开发期间工作的任何大小的快照.

现场演示

要将点转换为像素大小,您只需使用系统DPI / 72:

80 pt * (96 / 72) = 107 pixels @ 96 DPI.