清除 HTML <canvas> 中字体路径的像素

Question

我想知道如何创建一个彩色画布，但带有透明部分的字体。我希望字体在这个画布上创建一个洞。这可能吗？如何？我的目标是营造一种图像嵌入字体的印象......

谢谢你:)

Answer 1

<canvas> 提供了一种叫做复合操作的东西，用于截断和此类效果。我相信您想要的操作称为destination out：

https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

以下是规范中的更多技术细节：

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#compositing

我无法为您提供实际的工作代码（您的用例非常少见），但您应该能够找到 globalComposite 教程，并且几乎不玩他们的代码，您就可以了解如何应用为您的案例做手术。