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

Question

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

画布上的大多数元素也是根据画布的宽度和高度设置的，因此它们可以缩小尺寸并根据画布的大小进行定位。

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

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

Answer 1

只需使用因子缩放font-size。

基础

让我们说你的画布默认大小为1000像素，字体大小为80像素（画布将pt转换为像素 - 为简单起见，我在这里使用80，见底部）。 / p>

这将创建一个关系：

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

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

Live demo

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

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

Answer 2

许多响应式设计使用媒体断点来控制字体大小。

字体大小通过一系列介质尺寸保持固定。

在resize事件处理程序中，将字体大小应用于一系列画布大小：

if(canvas.width<480){
    context.font='14px verdana';
}else if(canvas.width<768){
    context.font='30px verdana';
}else{
    context.font='80px verdana';
}

[更有效率......]

为每种媒体格式预定义一些字体大小：

var fontSizes={
    phone:{
        XSmall:6,
        Small:8,
        Medium:10,
        Large:12,
        XLarge:14
    },
    tablet:{
        XSmall:10,
        Small:12,
        Medium:16,
        Large:24,
        XLarge:30
    },
    desktop:{
        XSmall:14,
        Small:18,
        Medium:30,
        Large:40,
        XLarge:80
    },
}

您可以将这些预定义的字体大小用于画布文本：

context.font=fontSizes[media].XSmall+" verdana";
context.fillText("XSmall text",20,20);

context.font=fontSizes[media].Large+" verdana";
context.fillText("Large text",20,20);

然后在调整大小处理程序中，您只需设置适当的媒体类型。

这样，您无需在项目的任何位置重新编码context.font。

var media="desktop";

if(canvas.width<480){
    media="phone";
}else if(canvas.width<768){
    media="tablet";
}else{
    media="desktop";
}

Answer 3

您应该将坐标视为虚拟坐标：如果画布占据屏幕的1/3，请问自己：字体需要多少空间（相对），而不是它的大小。

决定画布的所有虚拟分辨率，然后在该分辨率中绘制所有内容......前提是你缩放了画布。

例如，您可以确定您的画布具有600 x 200虚拟分辨率。当您知道实际窗口大小时，您将拥有真正的画布大小。然后使用scale(realWidth/600, realHeight/200)缩放画布，并且所有设备上的所有内容都相同。

我只是做了一个小小的小提琴来说明，你会看到它为不同大小的画布生成“相同”的图像：
http://jsbin.com/tisoguve/1/edit?js,output

Answer 4

我不喜欢在任何应用中使用确定的宽度或高度。相反，我使用窗口对象来确定屏幕上的空间量，而不是说＆＃34; width = 1000＆＃34;它看起来更像下面的代码。我注意到我正在使用的当前屏幕分辨率，以便在屏幕上调整内容大小时，所有内容都应根据创建时的大小进行缩放。假设原始屏幕分辨率是1366，我们希望原始字体设置为20 .....

<canvas id="canvas"" width="0" height="0" style="position:relative;" ></canvas>
var canvas = document.getElementById("canvas");
var context= canvas.getContext('2d');
var canvas.width = document.body.clientWidth;
var canvas.height = document.body.clientHeight;
var px= 20-(((1366-canvas.width)/1366)*20); 
var fontStyle = "italic";
var fontWeight = "bold";
var fontSize = +px+"px";
var fontFamily = "Verdana";
var b = " ";
context.font = fontStyle + b + fontWeight + b + fontSize + b + fontFamily;

我已尝试使用Safari，IE，Chrome，Firefox，并具有响应性 设计视图，它的工作原理。尝试在我的应用程序中保存，缩放和恢复，在旧画布上创建了一个分辨率较低的前景图像。我想，尝试以上面显示的方式运行一系列媒体大小似乎很大。我想我可能会使用以下配置好的页面布局样式表。

var px= 20-(((1366-canvas.width/3)/1366)*20);
context.font = +px+"px";
//place text here for this font
px= 12-(((1366-canvas.width/3)/1366)*12); 
context.font = +px+"px";
//place text here for this font

对于其他对象，我会尝试使用相同的方法，但是，限制使用javascript绘制到画布的图像，尽可能多地使用带有％的css，并在必要时重绘图像以防止用户缩放页面。

context.fillText  ("Click To Start", canvas.width/3, canvas.height/1.7);
context.strokeText  ("Click To Start", canvas.width/3, canvas.height/1.7);