cesium 科技感图标

可拆分为：底部扩散圆 + 动态发光线 + 图标 + 文字（背景框），颜色均可自定义

其他的不赘述，就说一下背景框，使用canvas绘制：

CanvasRenderingContext2D.prototype.roundRect =
        function (x, y, width, height, radius, fill, stroke) {
            if (typeof stroke == "undefined") {
                stroke = true;
            }
            if (typeof radius === "undefined") {
                radius = 15;
            }
            this.beginPath();
            this.moveTo(x + radius + 105, y);
            this.lineTo(x + width - radius + 105, y);
            this.quadraticCurveTo(x + width + 105, y, x + width + 105, y + radius);
            this.lineTo(x + width + 105, y + height - radius);
            this.quadraticCurveTo(x + width + 105, y + height, x + width - radius + 105, y + height);
            this.lineTo(x + radius + 105, y + height);
            this.quadraticCurveTo(x + 105, y + height, x + 105, y + height - radius);
            this.lineTo(x + 105, y + radius);
            this.quadraticCurveTo(x + 105, y, x + radius + 105, y);
            this.fillStyle = settings.backgroundColor;
            ctx.lineWidth = 2;
            ctx.strokeStyle = settings.color;
            this.stroke();
            this.closePath();
            this.fill();
            var d = 10
            if (stroke) {
                ctx.beginPath();
                ctx.moveTo(x + radius + 105 - d, y);
                ctx.lineTo(x + width - radius + d + 105, y);
                ctx.moveTo(x + radius + 105 - d, y + height);
                ctx.lineTo(x + width - radius + d + 105, y + height);
                ctx.lineWidth = 3;
                ctx.strokeStyle = settings.color;
                this.stroke();
                ctx.closePath();
            }
        };

因为开始绘制出来，只有两侧弧形边框有颜色：

所以加了后来一段，再次绘制上下的边框

最后效果：