谷歌字体加载中文字体DOM导致Canvas字体缺失(HTML5 Canvas在预加载完字体后绘图)

0oD三一o0

温馨提示:这篇文章已超过829天没有更新,请注意相关的内容是否还可用!

有时候在绘制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测试


免责声明:本文来自广树,不代表0oD三一o0的观点和立场,如有侵权请联系本平台处理。

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
评论列表 (有 15 条评论,1800人围观)
取消
微信二维码
微信二维码
支付宝二维码