如何创建用矩形组成的文本？ (canvas, pixi.js, three.js)

Question

我的任务是做一个动态进度条。首先，到某个日期剩余的时间应该改变。这没有问题。主要问题是如何让数字填满轮廓？（这个电路也是从剩下的一个动态考虑的）对空白的解决方案感兴趣 canvas or three.js or pixi.js Screenshot

Answer 1

使用 svg 和一点点 javascript 很容易做到这一点。诀窍是使用线性渐变（实际上只是一个尖锐的步骤）来填充文本。

工作示例：

const input = document.querySelector("input");
const gradientStops = Array.from(
  document.querySelectorAll("#fillGradient stop")
);

input.addEventListener("input", ev => {
  // value is a number between 0 and 1
  const value = ev.target.valueAsNumber;
  gradientStops.forEach(stop => {
    stop.offset.baseVal = value;
  });
});

body { margin: 0; background: red; font-family: sans-serif;  }
svg { width: 100%; height: auto; color: white; }
svg text {
  font-size: 60px; 
  font-weight: bold; 
  stroke: currentColor; 
  stroke-width: 1px;
  fill: url(#fillGradient)
}
input { position: fixed; bottom: 1em; display: block; width: 90%; margin: 0 5%; }

<svg viewBox="0 0 400 200">
  <defs>
    <linearGradient id="fillGradient">
      <stop offset="50%" stop-color="currentColor" />
      <stop offset="50%" stop-color="transparent" />
    </linearGradient>
  </defs>

  <text x="0" y="60">10D:20:42:12</text>
</svg>

<input type="range" min=0 max=1 step=0.001 />

如果您需要根据 canvas 执行此操作，我认为最简单的方法是

用白色描边和填充渲染文本
使用clearRect删除部分文字
再次渲染文本，这次使用透明填充颜色

如何创建用矩形组成的文本？ (canvas, pixi.js, three.js)

How create text composing with rectangle? (canvas, pixi.js, three.js)

javascript

canvas

three.js

pixi.js