1. 首页
  2. 问答
  3. html canvas：剪裁和文本

html canvas：剪裁和文本

2011-09-05 62 views
7

我正在使用canvas， 绘制应用程序，我想让用户选择只在选定区域绘制的选项。 因为我可以使用clip（）方法。 但如果我想让用户也能够在里面画字母 - 有什么办法可以使用clip（）作为文本吗？ 有另一种方法可以做到吗？html canvas：剪裁和文本

谢谢

来源

2011-09-05 Amit Hagin

+0

我的东西不能理解“但是如果我想让用户能够在里面画字母也是”部分 –

回答

11

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

您将需要使用第二个内存（不在页面上）画布以实现该效果。这里是如何：

  1. 请在内存中的画布上，将其设置为宽度和高度可以包含文本
  2. 绘制文本到内存帆布
  3. 设置在内存方面的的globalCompositeOperation为“源式”
  4. 绘制所需剪辑到文本
  5. 使用drawImage(in-memory-canvas, x, y)把新创建的影响到你的正常的画布

来源

2011-09-05 22:00:06

+0

很好的答案！谢谢 –

+0

好吧，这有些问题。当我用小于100％的alpha颜色绘制“剪裁”文本时，我无法再用更高的alpha％颜色绘制相同的像素。 –

相关问题

 相关问题