html - html 画布：剪辑和文本

Question

我正在使用画布开发绘画应用程序，我想让用户选择仅在选定区域进行绘制。为此，我可以使用 clip() 方法。但是如果我希望用户也能够在字母内部绘制 - 有什么方法可以使用 clip() 文本？我还有其他方法可以做到吗？

谢谢

Answer 1

您可以这样做，但不能使用剪辑。Clip 仅适用于路径，文本不是路径。

您将需要使用第二个内存（不在页面上）画布以实现效果。方法如下：

1. 制作一个内存画布，将其设置为能够包含文本的宽度和高度
2. 将文本绘制到内存中的画布上
3. 将内存上下文的 globalCompositeOperation 设置为 'source-in'
4. 将您想要剪辑的内容绘制到文本中
5. 用于drawImage(in-memory-canvas, x, y)将新创建的效果放到您的普通画布上