如何创建用矩形组成的文本？（画布，pixi.js，三个.js）答案

【问题标题】：How create text composing with rectangle? (canvas, pixi.js, three.js)如何创建用矩形组成的文本？（画布，pixi.js，三个.js）
【发布时间】：2020-06-26 11:58:51
【问题描述】：

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

【问题讨论】：

标签： javascript canvas three.js pixi.js

【解决方案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 />

如果你需要基于画布来做这个，我认为最简单的方法是

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

【讨论】：