帆布填充 - 对角线舱口

时间:2015-09-11 14:33:10

标签: html5-canvas

早上好,

我正在开发一个项目,我需要绘制通用多边形并将其填充到HTML5 Canvas上。我需要用可配置的颜色用对角线填充形状。我目前看到了解决这个问题的两种方法。

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

第二种方法是使用HTML5 Canvas中的“填充图案”功能,创建一个小的PNG(比如5x5),并在其中绘制图案。我已成功实现了这一点,但不认为可以动态更改此图像的颜色。

有没有人做过类似的事情?我知道还有其他库或选项可供使用而不是HTML5 Canvas,但我们只是在评估外部库之前尝试使用基本的HTML / CSS / JavaScript。

谢谢大家。

1 个答案:

答案 0 :(得分:1)

您可以将图案(使用画布)绘制到单独的画布元素中,并使用DataURL方法将填充该纹理添加到主绘图画布中。

非常确定this post详细说明了您之后的事情。