导航

萌即是正义!时不时分享一些ACG活动记录与有趣代码的小站!

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

作者:广树·时间:2021-11-01 20:08:20·分类:JavaScript/jQuery/Vue

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

侧边栏
最新评论
广树
2024-06-13
@老张博客:🤭没有被罚款喔,请大佬放心
老张博客
2024-06-13
翘班不怕被罚款呀
广树
2024-06-12
@YuanMoe:不,你已经没有沙发了
YuanMoe
2024-06-12
沙发
广树
2024-06-12
@mikusa:是的,整活类作品还是要靠动画这种形式。
正在攻略

圣兽之王.jpg

传颂之物

PSN奖杯卡

PSN奖杯卡

赞助商广告