HTML画布：剪切和文本

Question

我正在开发一个使用canvas的绘画应用程序，并希望让用户选择只在指定区域内绘制。为此，我可以使用clip()方法。但是如果我希望用户也能在字母内部绘制，是否有办法在文本上使用clip()呢？还有其他方法吗？谢谢。

- Amit Hagin

---

我无法理解 "但如果我想让用户也能在字母内部绘制" 这部分。 - Mikko Ohtamaa

Answer 1

您可以实现这一操作，但不能使用clip。 clip仅适用于路径，而文本不是路径。

您需要使用第二个内存中的（不在页面上的）画布才能实现该效果。以下是具体步骤：

1. 创建一个内存画布，将其设置为足以包含文本的宽度和高度
2. 将文本绘制到该内存画布中
3. 将内存上下文的globalCompositeOperation设置为“source-in”
4. 将要剪切的内容绘制到文本上
5. 使用drawImage(in-memory-canvas, x, y) 将新创建的效果放在普通画布上。

- Simon Sarris

---

嗯，它出现了一些问题。当我用小于100%的透明度颜色绘制“裁剪”文本时，我无法再用更高的透明度％颜色绘制相同的像素。 - Amit Hagin