导航

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

侧边栏
热门文章
1推文
看《间谍×过家家·代号:白》的时候亚马逊还顺带给我推荐了《铃芽之旅》,这才想起来我《铃芽之旅》也还没看呀!于是又抽空在亚马逊上把《铃芽之旅》给看完了。 可以说是相继《你的名字》、《天气之子》之后的集大成之作。画面依旧是那么的漂亮,剧情依旧是那个女孩遇见男孩。相比较前几作,这作在男女主的感情描绘上确实生硬了一些,有一种男主仅凭一张脸就让女主出生入死的感觉😅。不过相对的,这一作对于"灾难"的描绘比前几作要强上很多。伏笔也还不错,只不过感觉剧中有挺多我觉得应该是伏笔的地方结果居然不是,不知道是不是因为篇幅原因给删减了? 这时间一晃《铃芽之旅》已经是2022年的电影了,不知道新海诚的下一部作品什么时候出呀!
热度
377
2页面
友链
热度
247
3推文
今日份的秋叶原。
热度
143
4博文
探访《蜡笔小新》老家——春日部游记
热度
117
5博文
《泰拉瑞亚》1.4 突然无法拾取/捡取物品怎么办?
热度
117
6博文
让智能AI(waifulabs)来为你生成老婆吧!
热度
117
7博文
3DS模拟器简体中文字库 | Citra3ds字库 | 符文工房4乱码解决字库 | shared_font.bin
热度
91
8推文
今天去看了首部初音未来的电影《剧场版 世界计划 破碎的世界与无法歌唱的未来》。 说是初音未来的电影,但其实是手游《世界计划》的剧场版。好像有挺多人看到是初音未来的电影就去看了,结果发现并不全是😅。其实在宣传海报中,初音未来后面的那些人才是主角。 不过,我也是那些没玩过手游的观众之一。其实整场看下来问题也不是很大,就是对于人物关系和世界观的设定可能会有些问题。电影其实也很贴心地在剧情开头,大致以剧情的形式展示了手游中的五个团体的人物及其性格,但感觉还是有些杯水车薪,约等于看个眼熟。 此次的电影是第一次购买应援场。所谓的应援场,就是能在电影院里像是听演唱会一样挥舞荧光棒和尽情呐喊。看着前排那些粉丝看到自己喜欢角色时的呐喊,以及演唱会环节的打CALL,应援场确实是很有意思的一种电影观看方式呢! 剧情方面,属于看了开头大概能猜到整部动画的剧情走向。不过,通过演唱会的气氛渲染,甚至还感受到了一丝丝的感动。 总体来说,对于手游的粉丝来说可能是嘉年华般的狂喜,对于没接触过手游的路人来说也能一定程度融入其中,属于一部不错的粉丝向电影(不管是手游粉丝还是初音未来粉丝)。 首周电影特典是CD和游戏内的兑换码。送CD这种形式还第一次遇到,官方大气!
热度
65
9博文
《孤独摇滚》圣地巡礼——下北泽&下北泽咖喱节2023
热度
65
10页面
程序员老黄历&求签
热度
65
最新评论
广树
2025-01-28 19:10
@Xia:除夕快乐!
Xia
2025-01-28 18:18
嘿嘿,广树大大,除夕快乐哇!!! (☆ω☆)
广树
2025-01-28 18:05
@ZeroCounter:对,男女主的感情线太单薄太突然了,一见钟情大概就是这么回事吧🤭。
广树
2025-01-28 18:04
@Jeffer.Z:虽然好像还有几个小时才到春节,总之先新年快乐!
ZeroCounter
2025-01-28 17:51
感觉《铃芽之旅》带给我的震撼感远不如《你的名字》😓男女主的感情线太单薄,像是2000円的短篇gal能写出来的感情戏和走马灯(倒也不至于)
正在攻略

logo_kai.jpg


PSN奖杯卡

PSN奖杯卡

赞助商广告

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测试

donate.png

1210 x 50(蓝底).png

cloudcone