html canvas:剪辑和文本

Question

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

谢谢

Answer 1

你可以这样做但不使用剪辑.剪辑仅适用于路径,文本不是路径.

您需要使用第二个内存中(不在页面上)画布才能达到效果.方法如下:

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