HTML5 canvas 阴影

阴影

在canvas中进行绘制时,不管是文本、图形、还是图像,也不管是描边还是填充,都可以通过设置上下文对象的相关属性,来为它们设置阴影。这些属性及含义见表 4:

表 4阴影的属性及含义
属性 含义
根据canvas规范,只有在满足以下两个条件时,浏览器才会绘制阴影:1)指定了一个非全透明的shadowColor属性值;2)shadowOffsetX、shadowOffsetY、shadowBlur三个属性中,至少有一个属性的值不是0。

以下代码给黑色的文本增加灰色的阴影:

上述代码中,阴影在X轴的偏移量和Y轴的偏移量都设置的比较大,故产生的阴影也比较远,文本在画布也浮得较高。运行结果如图 44 所示:

阴影效果图4-24 阴影效果

由于阴影的shadowOffsetX属性被设置为正值,而shadowOffsetY属性被设置为负值,故阴影在X轴向右偏移,在Y轴向上偏移。

说明:

关于作者

歪脖网 的《HTML宝典》,欢迎在线阅读,并提出宝贵意见。

来源:ixygj197875

声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2018年3月21日
下一篇 2018年3月21日

相关推荐