canvas元素的内发光效果

最新推荐文章于 2025-06-09 17:55:09 发布

原创最新推荐文章于 2025-06-09 17:55:09 发布 · 1.3w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webkit #浏览器 #div #image #css #function

HTML5 && JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在canvas元素上实现内发光效果。当直接给canvas添加CSS3内发光样式无效时，提出了两种解决方案：1) 使用div包裹canvas，通过div的内发光效果并调整z-index；2) 在webkit内核浏览器中，利用CSS Canvas背景图片方法。还提到了canvas自身的shadow属性来创建内发光效果，并指出在Android WebView中可能的适用方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

如:

            <canvas id="canvas" style="z-index:-1; width:100%; height:100%; position:absolute;">
                Update your browser to enjoy canvas!
            </canvas>
        </div>

下面是画图的js代码：

try{

                    var img = new Image();
                    img.onload=function(){
                        var canvas = document.getElementById("canvas");
                        var context = canvas.getContext("2d");
                        var w = canvas.offsetWidth;
                        var h = canvas.offsetHeight;
                        var w1 = img.width;
                        var h1 = img.height;
                        context.canvas.width=w;
                        context.canvas.height=h;
                        context.drawImage(img, 0, 0, w1, h1, 0, 0, w, h);
                        context.save();
                    };

                    img.src="file:///D:/HTML5Work/2.jpg";
                }
                catch(e){
                    alert(e.message);
                }

显示效果挺好的，这个写法在支持CSS3的浏览器上都可以显示，然而不幸的是，这个方法因为将z-index设置为-1，页面上所有在这个位置的元素只要不是透明的都会盖住他，从而导致显示的难题。

我也试过将外面的div z-index设100， cavans z-index设为99，结果不work。。

2）只适用于webkit内核的浏览器，但是在页面展示上是ok的

如果是用webkit内核的浏览器（比如android 的webview用的是webkit），可以使用webkit特有的方法，将canvas设置为div的背景图片，问题就解决了，具体写法如下：

try{

                    var img = new Image();
                    img.onload=function(){
                        var div = document.getElementById("ddd");
                        var w = div.offsetWidth;
                        var h = div.offsetHeight;
                        div.style.background="-webkit-canvas(canvas_1)"; //
                        var context = document.getCSSCanvasContext("2d", "canvas_1", w, h); //这两句话是关键

                        var w1 = img.width;
                        var h1 = img.height;

                        alert(w+" "+h+" "+w1+" "+h1);

                        context.canvas.width=w;
                        context.canvas.height=h;
                        context.drawImage(img, 0, 0, w1, h1, 0, 0, w, h);
                        context.save();
                    };

                    img.src="file:///D:/HTML5Work/2.jpg";
                }
                catch(e){
                    alert(e.message);
                }

对应的HTML代码只需要div就行了，不需要定义canvas了。这个方法只支持webkit内核的浏览器。

3）除了以上两种使用CSS3的办法，还有用canvas直接画内部阴影的方法，主要通过

context.shadowColor，context.shadowOffsetX，context.shadowOffsetY ，context.shadowBlur四个属性，下面是个简单的例子：

下面是个例子：

var canvas = document.getElementById("ccc");

                        var context = canvas.getContext("2d");

                        context.beginPath();
                        context.arc(50, 50, 15, 0, Math.PI * 2, false);
                        context.closePath();

                        context.shadowColor = "red";
                        context.shadowOffsetX = 0;
                        context.shadowOffsetY = 0;
                        context.shadowBlur = 10;

                        context.fill();

效果是画个黑色的圆，发着红光。

因为我主要是开发android上的web widget，所以当然是倾向使用方法2，如果有更好的方法再记录上。