canvas元素的内发光效果

    我们知道使用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;">