形状内的边界文本

Question

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

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

基本上文本会溢出形状，我正在尝试对其进行遮罩/剪辑，但找不到任何解决方案。有什么想法吗？

Answer 1

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

要创建背景画布，只需这样做

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

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

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

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