javascript - 形状内的边界文本

Question

在画布上，我有一个背景形状和文字，

你如何模拟overflow:hidden;从 CSS 到文本的东西？

基本上文本溢出了形状，我试图掩盖/剪辑它，但找不到任何解决方案。有任何想法吗？

Answer 1

您可以创建一个新的背景画布，将其宽度和高度设置为所需的边界框，在其上绘制文本，然后将背景画布绘制到主画布。

要创建背景画布，只需执行

var tempCanvas = document.createElement('canvas');

但不要将其附加到任何其他 DOM 节点。然后，您可以设置画布的.width和.height，获取其上下文并在其上绘制。

要将其绘制回可见画布，只需将背景画布传递给主画布上下文的 drawImage：

mainCanvas.getContext('2d').drawImage(tempCanvas, x, y);