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

时间:2011-05-17 16:51:24

标签: html5 canvas

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

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

我意识到解决方案不是最优的:

  1. 是一条新路径,绘制没有笔划的三角形,填入,然后关闭路径
  2. 开始一条新路径,用第一个彩色笔划重绘第一面,关闭路径
  3. 开始一条新路径,用不同颜色的笔划重绘第二面,关闭路径
  4. 开始一条新路径,用不同颜色的笔划重绘第三面,关闭路径
  5. 简而言之,绘制一个没有笔画的填充形状,然后用独特的笔触样式重绘每一面。

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

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

1 个答案:

答案 0 :(得分:4)

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

你总是可以创建自己的函数,比如说,接受一堆点或类型的段(你必须创建自己的类)给每个颜色,并让该函数解析它们并进行绘制。但那就像你会得到的那样。

您很快就会意识到这会带来新的令人兴奋的问题,例如如何处理缓解问题。如果你不知道什么是缓和,你会发现这很快:)

(...然后使用ctx.linecap = 'round'

可以缓解部分问题