基于egret的点光源光线效果的实现

先上效果图

白色区域为光线区域，黑色区域为阴影区域，光源可以自定义坐标，同时可以添加位图作为光源样式。

代码实现主要包含两个函数，一个是计算光源产生的射线与个图形相交的坐标，一个用于绘制图形

getIntersection(ray, segment) {//计算交点
            var r_px = ray.a.x;
            var r_py = ray.a.y;
            var r_dx = ray.b.x - ray.a.x;
            var r_dy = ray.b.y - ray.a.y;

            var s_px = segment.a.x;
            var s_py = segment.a.y;
            var s_dx = segment.b.x - segment.a.x;
            var s_dy = segment.b.y - segment.a.y;

            var r_mag = Math.sqrt(r_dx * r_dx + r_dy * r_dy);
            var s_mag = Math.sqrt(s_dx * s_dx + s_dy * s_dy);
            if (r_dx / r_mag == s_dx / s_mag && r_dy / r_mag == s_dy / s_mag) { 
                return null;
            }

            var T2 = (r_dx * (s_py - r_py) + r_dy * (r_px - s_px)) / (s_dx * r_dy - s_dy * r_dx);
            var T1 = (s_px + s_dx * T2 - r_px) / r_dx;

            if (T1 < 0) return null;
            if (T2 < 0 || T2 > 1) return null;

            return {
                x: r_px + r_dx * T1,
                y: r_py + r_dy * T1,
                param: T1
            };

        }

draw(x, y) {
            this.ctx.clear();
            for (var i = 0; i < this.segments.length; i++) {
                var seg = this.segments[i];
                this.ctx.lineStyle(2, 0xffffff);
                this.ctx.moveTo(seg.a.x, seg.a.y);
                this.ctx.lineTo(seg.b.x, seg.b.y);
            }

            var points = (function (args) {
                var a = [];
                args.forEach(function (seg) {
                    a.push(seg.a, seg.b);
                });
                return a;
            })(this.segments);
            var uniquePoints = (function (points) {
                var set = {};
                return points.filter(function (p) {
                    var key = p.x + "," + p.y;
                    if (key in set) {
                        return false;
                    } else {
                        set[key] = true;
                        return true;
                    }
                });
            })(points);
            var uniqueAngles = [];
            for (var j = 0; j < uniquePoints.length; j++) {
                var uniquePoint = uniquePoints[j];
                var angles = Math.atan2(uniquePoint.y - y, uniquePoint.x - x);
                uniquePoint.angle = angles;
                uniqueAngles.push(angles - 0.00001, angles, angles + 0.00001);
            }

            var insert = [];
            for (var j = 0; j < uniqueAngles.length; j++) {
                var angle = uniqueAngles[j];
                var dx = Math.cos(angle);
                var dy = Math.sin(angle);
                var ray = {
                    a: { x: x, y: y },
                    b: { x: x + dx, y: y + dy }
                };

                var closestIntersect = null;
                for (var i = 0; i < this.segments.length; i++) {
                    var intersect = this.getIntersection(ray, this.segments[i]);
                    if (!intersect) continue;
                    if (!closestIntersect || intersect.param < closestIntersect.param) {
                        closestIntersect = intersect;
                    }
                }
                if (!closestIntersect) continue;
                closestIntersect.angle = angle;
                insert.push(closestIntersect);
            }
            insert = insert.sort(function (a, b) {
                return a.angle - b.angle;
            });

            this.ctx.beginFill( 0xffffff,1);
            this.ctx.moveTo(insert[0].x, insert[0].y);
            for (var i = 0; i < insert.length; i++) {
                var _insert = insert[i];
                this.ctx.lineTo(_insert.x, _insert.y);
            }
            this.ctx.endFill();
        }

        segments = [//图形顶点坐标

            { a: { x: 0, y: 0 }, b: { x: 640, y: 0 } },
            { a: { x: 640, y: 0 }, b: { x: 640, y: 360 } },
            { a: { x: 640, y: 360 }, b: { x: 0, y: 360 } },
            { a: { x: 0, y: 360 }, b: { x: 0, y: 0 } },

            { a: { x: 100, y: 150 }, b: { x: 120, y: 50 } },
            { a: { x: 120, y: 50 }, b: { x: 200, y: 80 } },
            { a: { x: 200, y: 80 }, b: { x: 140, y: 210 } },
            { a: { x: 140, y: 210 }, b: { x: 100, y: 150 } },

            { a: { x: 100, y: 200 }, b: { x: 120, y: 250 } },
            { a: { x: 120, y: 250 }, b: { x: 60, y: 300 } },
            { a: { x: 60, y: 300 }, b: { x: 100, y: 200 } },

            { a: { x: 200, y: 260 }, b: { x: 220, y: 150 } },
            { a: { x: 220, y: 150 }, b: { x: 300, y: 200 } },
            { a: { x: 300, y: 200 }, b: { x: 350, y: 320 } },
            { a: { x: 350, y: 320 }, b: { x: 200, y: 260 } },

            { a: { x: 340, y: 60 }, b: { x: 360, y: 40 } },
            { a: { x: 360, y: 40 }, b: { x: 370, y: 70 } },
            { a: { x: 370, y: 70 }, b: { x: 340, y: 60 } },

            { a: { x: 450, y: 190 }, b: { x: 560, y: 170 } },
            { a: { x: 560, y: 170 }, b: { x: 540, y: 270 } },
            { a: { x: 540, y: 270 }, b: { x: 430, y: 290 } },
            { a: { x: 430, y: 290 }, b: { x: 450, y: 190 } },

            { a: { x: 400, y: 95 }, b: { x: 580, y: 50 } },
            { a: { x: 580, y: 50 }, b: { x: 480, y: 150 } },
            { a: { x: 480, y: 150 }, b: { x: 400, y: 95 } }
        ];

draw（）函数传入光源点坐标。后期可以根据游戏需要，通过遮罩实现光源的形式变化（如锥形光），同时结合地图障碍物制作动态光源，实现动态光影效果。