canvas 绘制立体圆环

2019-2-5 12:34| 作者: admin| 查看: 361| 评论: 0|来自: 凯博

分享一个代码实例,它实现了绘制立体圆环的效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码




凯博






如果单独绘制任何一个圆环并填充,那么效果都是完全填充。

但是为什么这里能够实现圆环效果,下面做一下介绍。

fill()方法是有参数的,如果不填写,那么默认值是"nonzero",这是一个填充规则。

关于此规则具体参阅canvas非零绕组规则与奇偶规则一章节。

明白这个规则,那么再利用阴影就可以实现要求了。

关于阴影的使用参阅canvas 阴影设置一章节。

最新评论

返回顶部