在形状内部绑定文本

Question

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

如何从css到文本模拟overflow:hidden;之类的内容？

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

Answer 1

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

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

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

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

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

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