html canvas：剪辑和文本

Question

我正在使用画布制作绘画应用， 我想让用户选择只在选定区域绘制。 为此，我可以使用clip（）方法。 但如果我希望用户能够在内部绘制字母 - 有没有办法使用clip（）作为文本？ 还有另一种方法吗？

感谢

Answer 1

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

您需要使用第二个内存中（不在页面上）画布才能达到效果。方法如下：

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