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

前端之家收集整理的这篇文章主要介绍了html5 – 绘制具有不同笔触样式的单个填充形状前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以在画布中绘制具有不同笔触样式的单个填充形状?

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

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

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

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

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

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

解决方法

简短的回答是否定的,无论如何都不是内置的方式.原因是因为每次对stroke()的新调用,它都将描绘整个路径,而不仅仅是尚未描边的部分.

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

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

(…然后使用ctx.linecap =’round’可以缓解一些问题

猜你在找的HTML5相关文章