html canvas：剪裁和文本

Question

我正在使用canvas， 繪製應用程序，我想讓用戶選擇只在選定區域繪製的選項。 因爲我可以使用clip（）方法。 但如果我想讓用戶也能夠在裏面畫字母 - 有什麼辦法可以使用clip（）作爲文本嗎？ 有另一種方法可以做到嗎？

謝謝

Answer 1

你可以做到這一點，但不能使用剪輯。剪輯僅適用於路徑，文本不是路徑。

您將需要使用第二個內存（不在頁面上）畫布以實現該效果。這裏是如何：

1. 請在內存中的畫布上，將其設置爲寬度和高度可以包含文本
2. 繪製文本到內存帆布
3. 設置在內存方面的的globalCompositeOperation爲「源式」
4. 繪製所需剪輯到文本
5. 使用drawImage(in-memory-canvas, x, y)把新創建的影響到你的正常的畫布