我正在使用 Canvas 开发一个绘画应用程序， 我想让用户选择只在选定区域绘制。 为此，我可以使用 clip() 方法。 但是如果我希望用户也能够在字母内部绘制 - 有没有办法将 clip() 用于文本？ 还有其他方法吗？

谢谢

最佳答案

你可以做到这一点，但不能使用剪辑。剪辑仅适用于路径，文本不是路径。

您将需要使用第二个内存中(不在页面上) Canvas 来实现该效果。方法如下:

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

关于html Canvas : clipping and text，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7307430/