HTML5 Canvas在预加载完字体后绘图

导航

侧边栏

攻略中

暂无评分

NS节奏天国奇迹之星

2026年7月08日 20时 ~ 攻略中

已累计游玩1个月23天

《节奏天国：奇迹之星》是一款轻松又充满创意的音乐节奏游戏，玩家只需跟随音乐节拍按下按键，就能完成跳跃、敲击空罐、制作料理等各种有趣的小挑战。游戏延续了《节奏天国》系列简单易上手、节奏感强、画风幽默的特点，让玩家在一个个短小精巧的关卡中感受音乐与反应力结合的乐趣，适合喜欢节奏游戏和轻松休闲玩法的玩家体验。

HTML5 Canvas在预加载完字体后绘图

2021-11-01 20:08:20

JavaScript

有时候在绘制canvas的时候可能会用到一些特殊字体。而中文字体例如是用类似谷歌字体加载的话，可能会是分段加载，DOM不一定会加载过某些字体从而导致在绘制canvas时出现字体缺失。

这个时候可以使用如下代码预加载css中的字体

document.fonts.load

实际使用案例：

const loadTextFont = async (fontSize, text) => {
  await document.fonts.load(`${fontSize}px Noto Sans SC`, text).catch((e) => {
    console.error(e);
  });
};
const writeText = (text, fontSize, color, shadow, x, y, context) => {
  context.fillStyle = color;
  context.textBaseline = "middle";
  context.textAlign = "center";
  context.font = `${fontSize}px Noto Sans SC`;
  const res = context.measureText(text);
  if (shadow) {
    context.shadowBlur = 3;
    context.shadowColor = "black";
    context.strokeText(text, x, y);
  }
  context.fillText(text, x, y);
  return res;
};
const init = async (canvas,loadFont,title,fontSize) => {
  canvas.width = 396;
  canvas.height = 32;
  const context = canvas.getContext("2d");
  if(loadFont){
    await loadTextFont(fontSize, title);
  }
  const titleRes = writeText(
    title,
    fontSize,
    "#ffffff",
    true,
    202,
    15,
    context
  );
};
init(document.getElementById("canvas2"),false,"不预先加载思源字体","28");
init(document.getElementById("canvas"),true,"思源字体预加载","28");

DEMO测试