绘制具有不同笔触样式的单个填充形状

mat*_*ler 6 html5 canvas

是否可以在画布中绘制具有不同笔触样式的单个填充形状?

换句话说,我可以绘制一个蓝色三角形,并使每一面都有不同的颜色吗?

我意识到有一个不太理想的解决方案:

  1. 作为一条新路径,绘制没有笔划的三角形,填入,然后关闭路径
  2. 开始一条新路径,用第一个彩色笔划重绘第一面,关闭路径
  3. 开始一条新路径,用不同颜色的笔划重绘第二面,关闭路径
  4. 开始一条新路径,用不同颜色的笔划重绘第三面,关闭路径

简而言之,绘制一个没有笔画的填充形状,然后用独特的笔触样式重绘每一面.

对于单个三角形而言,这不是什么大问题,但如果你有许多更复杂的形状,这似乎效率低下.

那么 - 是否可以在路径的不同部分绘制具有不同笔触样式的单个形状?

Sim*_*ris 4

简短的回答是否定的,无论如何都不是内置的。原因是因为每次对它的新调用stroke()都会抚摸整个路径,而不仅仅是尚未抚摸的部分。

您始终可以创建自己的函数,例如,接受一堆点或段类型(您必须创建自己的类),为每个点或段赋予颜色,并让该函数解析它们并进行绘图。但这就是您所能得到的内置内容。

您很快就会意识到这会带来新的令人兴奋的问题,例如如何处理斜接。如果您不知道什么是斜接,通过这样做您会很快找到答案:)

(...然后可以通过使用来缓解一些问题ctx.linecap = 'round'