如何使用带有 HTML5 Canvas 的 Leon Sans 为文本粗细设置动画

Question

使用允许通过 canvas 实现动态动画的字体 Leon Sans，我如何为给定文本字符串的粗细设置动画，当每个字母变粗时会略微交错，如下所示：

（在 "weight change" 列表项上方的 "What is special" 部分的 README 中可以查看所需效果的 gif 动画。）

工作入门代码

我有一个字符串可以用这个建议的起始代码正确绘制：

let leon, canvas, ctx;

const sw = 800;
const sh = 600;
const pixelRatio = 2;

function init() {
    canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    ctx = canvas.getContext("2d");

    canvas.width = sw * pixelRatio;
    canvas.height = sh * pixelRatio;
    canvas.style.width = sw + 'px';
    canvas.style.height = sh + 'px';
    ctx.scale(pixelRatio, pixelRatio);

    leon = new LeonSans({
        text: 'animate this text',
        color: ['#000000'],
        size: 80,
        weight: 200
    });

    requestAnimationFrame(animate);
}

function animate(t) {
    requestAnimationFrame(animate);

    ctx.clearRect(0, 0, sw, sh);

    const x = (sw - leon.rect.w) / 2;
    const y = (sh - leon.rect.h) / 2;
    leon.position(x, y);

    leon.draw(ctx);
}

window.onload = () => {
    init();
};

(Customized example of working code on Glitch)

尝试失败

字体的创建者让我 this suggestion 使用以下代码片段：

this.leons_ = [];
this.text_ = String('animate this text').split('');
this.leonTotal_ = this.text_.length;
for (let i = 0; i < this.leonTotal_; i++) {
  const ls = new LeonSans({
    text: this.text_[i],
    color: ['blue'],
    size: 100,
    weight: 200
  });
  this.leons_.push(ls);
}

但我还是做不到。当我尝试以这种方式合并它时，屏幕上根本看不到任何文本：

let leon, canvas, ctx;
let leons_, text_, leonTotal_;

const sw = 800;
const sh = 600;
const pixelRatio = 2;

function init() {
    canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    ctx = canvas.getContext("2d");

    canvas.width = sw * pixelRatio;
    canvas.height = sh * pixelRatio;
    canvas.style.width = sw + 'px';
    canvas.style.height = sh + 'px';
    ctx.scale(pixelRatio, pixelRatio);

    leons_ = [];
    text_ = String('animate this text').split('');
    leonTotal_ = text_.length;
    for (let i = 0; i < leonTotal_; i++) {
      const ls = new LeonSans({
        text: text_[i],
        color: ['blue'],
        size: 100,
        weight: 200
      });
      leons_.push(ls);
    }

    requestAnimationFrame(animate);
}

function animate(t) {
    requestAnimationFrame(animate);

    ctx.clearRect(0, 0, sw, sh);

    const x = (sw - leon.rect.w) / 2;
    const y = (sh - leon.rect.h) / 2;
    leon.position(x, y);

    leon.draw(ctx);
}

window.onload = () => {
    init();
};

我收到控制台错误：

leon.js:5316 Uncaught TypeError: Cannot read property 'rect' of undefined

参考这一行：

const x = (sw - leon.rect.w) / 2;

但我怀疑在专门调试该错误之前我需要修正我的方法。

有什么想法吗？（随意重新混合上面链接的 Glitch 项目。）

谢谢。

Answer 1

对于任何感兴趣的人，我想通了。

从我上面失败的尝试开始，我能够使用我创建的数组 leons_，TweenMax.staggerFromTo 循环遍历数组中的每个字母：

TweenMax.staggerFromTo(
  leons_,
  1,
  {
    weight: minWeight,
    size: sw * leonHeightRatio
  },                    
  {
    weight: maxWeight,
    size: sw * leonHeightRatioLarge,
    repeat: -1,
    yoyo: true,
    ease: Power2.easeInOut
  },
0.1);

在此处查看工作代码示例：https://leon-sans-staggered-weight-size-animations.glitch.me/

如何使用带有 HTML5 Canvas 的 Leon Sans 为文本粗细设置动画

How to animate text weight using Leon Sans with HTML5 Canvas

javascript

fonts

canvas

工作入门代码

尝试失败