画布填充 - 对角线填充

Question

早上好，

我正在做一个项目，我需要绘制通用多边形并将它们填充到 HTML5 画布上。我需要用可配置的颜色用对角线填充形状。我目前看到这个问题的两种解决方案。

首先是使用 moveTo 和 lineTo 函数计算在形状本身上绘制彩色线条的数学和算法。虽然这是可能的，但我不知道如何从算法开始。

第二种方法是使用 HTML5 画布中的填充模式功能，通过创建一个小的 PNG（比如 5x5）并在其中绘制模式。我已经成功实现了这一点，但不认为可以即时更改此图像的颜色。

有人做过类似的事情吗？我知道除了 HTML5 Canvas 之外，还有其他库或选项可供使用，但我们试图在评估外部库之前只使用基本的 HTML/CSS/JavaScript。

谢谢大家。

Answer 1

您可以将图案（使用画布）绘制到单独的画布元素中，并使用 DataURL 方法将纹理填充到您的主绘图画布中。

很确定this post 详细说明了您所追求的东西。