基于Canvas Size的HTML5 Canvas字体大小 [英] HTML5 Canvas Font Size Based on Canvas Size

问题描述

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

画布上的大多数元素也是基于画布的宽度和高度设置的，因此它们在大小上缩小，并根据大小

例如，字体大小我做的游戏的开始屏幕的大小，是80pt。这是太大，如果浏览器是真的很小。

解决方案

只需使用因子缩放字体大小即可。

基础

假设您的画布默认大小为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，// canvas的所选默认宽度
 fontSize = 70; //默认字体大小
 
 function getFont（）{
 var ratio = fontSize / fontBase; // calc ratio 
 var size = canvas.width * ratio; //根据当前宽度获取字体大小
 return（size | 0）+'px sans-serif'; // set font 
} 
  

每次你需要更新字体）只需调用：

  ctx.font = getFont（）; //调用getFont设置新的字体大小
  

默认值是瞬间/在开发期间。

Live demo

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

80 pt *（96/72）= 107像素@ 96 DPI 。

I have the canvas size set to 1/3 the window.innerHeight and window.innerWidth of the browser.

Most of the elements on the canvas are also set based on the width and height of the canvas, so that they scale down in size and are positioned based on the size of the canvas.

How do I scale font sizes based on this as well?

For example, the font size of my opening screen of a game I'm making, is 80pt. That's way too big if the browser is really small. It goes off the canvas.

解决方案

Simply scale the font-size with a factor.

The basis

Lets say your canvas default size is 1000 pixels and the font size is 80 pixels (canvas converts pt to pixels - I use 80 here for simplicity, see bottom).

That will create a relationship of:

ratio = 80 / 1000 = 0.08

Lets verify when canvas width is 1000 by multiply with that ratio:

fontSize = 1000 * ratio = 80;

And we see we have 80 for the font as expected.

Now that the canvas size is smaller, lets say 500 pixels:

fontSize = 500 * ratio = 40;

That should correspond about to the relationship. Note that fonts do not behave linearly like that but it will be approximately correct.

Now simply set the size of the font:

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

Solution

The final code from this is in essence very simple:

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
}

Every time you need to update the font (ie. resize) just call:

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

The default values are snapshot of whatever size works in the moment/during development.

Live demo

To convert point to pixel size you simply use system DPI / 72:
80 pt * (96 / 72) = 107 pixels @ 96 DPI.

这篇关于基于Canvas Size的HTML5 Canvas字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！