我们知道使用CSS3可以实现阴影效果,box-shadow: 0px 0px 5px 5px black; 可以想象成是一个颜色为"black"的相同大小的阴影块在你要渲染的块的下面。
前面两个0px 0px的意思是阴影块的左上角位置与要渲染的块的偏移,可以为负数,第一个5px表示阴影块的模糊程度,数字越大越模糊,第二个5px表示阴影块往外辐射的距离,如果再后面加上inset, 写成, box-shadow: 0px 0px 5px 5px black inset; 就是向里面发光的内发光效果。
效果很炫,然而总是有些让人不爽的地方,当使用canvas画图片时(我的意思是画图片哦,不是直接在canvas上画画,而是用context.draw(image, 0, 0, w, h, 0, 0, w, h)这样的方法将图片画到canvas上)想要给这个canvas加上内发光效果的时候,如果直接给canvas加上上面这个css就看不到效果。这时候,
有两个办法:
1)适用于多数浏览器,但是带来页面显示的难题:
用div套住canvas,然后让div内发光,将canvas的z-index设为-1.
如:
<div id="ddd" style="box-shadow:0px 0px 20px 20px black inset; width:400px; height:300px; position:relative;">