Canvas+SVG 三角交叉灯光/球幕影院投影

把svg线条绘制在canvas上，通过css3添加动画。

canvas，light，教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1763
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

SVG = {
    createCanvas: function(width, height, containerId) {
        var container = document.getElementById(containerId);
        var canvas = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        canvas.setAttribute('width', width);
        canvas.setAttribute('height', height);
        canvas.setAttribute('class', 'svg');
        container.appendChild(canvas);
        return canvas;
    },
    createDefs: function(canvas) {
        var aDefs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
        canvas.appendChild(aDefs);
        return aDefs;
    },
    createGrad: function(aDefs) {
        var grad = document.createElementNS('http://www.w3.org/2000/svg', "radialGradient");
        grad.setAttribute("id", "gradient");
        grad.setAttribute("cx", "50%");
        grad.setAttribute("cy", "50%");
        grad.setAttribute("r", "50%");
        grad.setAttribute("fx", "50%");
        grad.setAttribute("fy", "50%");
        var stopBottom = document.createElementNS('http://www.w3.org/2000/svg', "stop");
        stopBottom.setAttribute("offset", "60%");
        stopBottom.setAttribute("stop-color", "rgb(0,0,0)");
        stopBottom.setAttribute("stop-opacity", "1");
        grad.appendChild(stopBottom);
        var stopTop = document.createElementNS('http://www.w3.org/2000/svg', "stop");
        stopTop.setAttribute("offset", "100%");
        stopTop.setAttribute("stop-color", "rgb(0,0,50)");
        stopTop.setAttribute("stop-opacity", "1");
        grad.appendChild(stopTop);
        aDefs.appendChild(grad);
    },
    createLine: function(x1, y1, x2, y2, color, w) {
        color = typeof color !== 'undefined' ? color : "#11ee11";
        w = typeof w !== 'undefined' ? w : 1;
        var aLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
        aLine.setAttribute('x1', x1);
        aLine.setAttribute('y1', y1);
        aLine.setAttribute('x2', x2);
        aLine.setAttribute('y2', y2);
        aLine.setAttribute('stroke', color);
        aLine.setAttribute('stroke-width', w);
        return aLine;
    },
    createBez: function(x0, y0, x1, y1, x2, y2, x, y, color, w) {
        color = typeof color !== 'undefined' ? color : 'rgba(255,200,255,0.1)';
        w = typeof w !== 'undefined' ? w : 1;
        var aBez = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        var d = "M" + x0 + "," + y0 + " C" + x1 + "," + y1 + " " + x2 + "," +
            y2 + " " + x + "," + y;
        aBez.setAttribute('d', d);
        aBez.setAttribute('fill', 'transparent');
        aBez.setAttribute('stroke', color);
        aBez.setAttribute('stroke-width', w);
        return aBez;
    },
    createCircle: function(cx, cy, r, grad) {
        var aCirc = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        aCirc.setAttribute('cx', cx);
        aCirc.setAttribute('cy', cy);
        aCirc.setAttribute('r', r);
        aCirc.setAttribute('fill', 'url(#' + grad + ')');
        aCirc.setAttribute('stroke', 'transparent');
        return aCirc;
    }
}

var lines = [];
lines.addLine = function(line) {
    this.push(line);
    return line;
}

// get coordinates from circle
function getCoordinates(cx, cy, r, number) {
    // lets divide 2PI per number of stops
    var pi = Math.PI;
    var x = [],
        y = [];
    for (p = 0; p <= 2 * pi; p += 2 * pi / number) {
        x.push((cx + r * Math.sin(p)).toFixed(2));
        y.push((cy + r * Math.cos(p)).toFixed(2));
    }
    return coords = [x, y];
}

function start() {
    // interesting variables, number of points on the circle and distance of lines on the same path (it is actually the distance of each bezier point to generate the curve)
    var points = 8;
    var distance = 30;

var raio = 300;
    var cx = 500;
    var cy = 500;
    var xAxis = 0;
    var x0, y0, x, y, slope, slope_, lx, ly;
    var coords = getCoordinates(cx, cy, raio, points);
    var canvas = SVG.createCanvas(1000, 1000, 'container'),
        arcElement, lineElement, i, a, r, l, s, h;
    var defs = SVG.createDefs(canvas);
    SVG.createGrad(defs);
    var count = 0;
    var circleElement = lines.addLine(SVG.createCircle(cx, cy, raio, 'gradient'));
    canvas.appendChild(circleElement);
    for (i = 0; i < points; i++) {
        for (a = i + 1; a <= points; a++) {
            x0 = coords[0][i];
            y0 = coords[1][i];
            x = coords[0][a];
            y = coords[1][a];
            slope = (y - y0) / (x - x0);
            slope_ = -1 / slope;
            for (r = -raio; r <= raio; r += distance) {
                lx = cx + r * Math.cos(Math.atan(slope_));
                ly = cy + r * Math.sin(Math.atan(slope_));
                if (!isNaN(lx)) {
                    var bezElement = lines.addLine(SVG.createBez(x0, y0, lx, ly, lx, ly, x, y));
                    canvas.appendChild(bezElement);
                }

}
        }
    }
}

start();

var path = document.querySelectorAll('.svg path');
var l = path.length;

for (var q = 0; q < l; q++) {
    // var comprimento = path[q].getTotalLength();
    // path[q].style.transition = path[q].style.WebkitTransition = 'none';
    /*path[q].style.strokeDasharray = comprimento + ' ' + comprimento;
    path[q].style.strokeDashoffset = comprimento;*/

/*path[q].style.strokeDasharray = '100% 100%';
    path[q].style.strokeDashoffset = '100%';
    path[q].style.animation = 'dash 4s ease-in-out infinite';*/

// console.log(path[q].style);
    // path[q].getBoundingClientRect();
    // path[q].style.transition = path[q].style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';
    // path[q].style.strokeDashoffset = '0';
}

编译

CSS

body {
    background: #333;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100 */
    
    margin: auto;
    /* Old browsers */
    
    background: #45484d;
    /* FF3.6+ */
    
    background: -moz-radial-gradient(center, ellipse cover, #45484d 0%, #000 100%);
    /* Chrome,Safari4+ */
    
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #45484d), color-stop(100%, #000));
    /* Chrome10+,Safari5.1+ */
    
    background: -webkit-radial-gradient(center, ellipse cover, #45484d 0%, #000 100%);
    /* Opera 12+ */
    
    background: -o-radial-gradient(center, ellipse cover, #45484d 0%, #000 100%);
    /* IE10+ */
    
    background: -ms-radial-gradient(center, ellipse cover, #45484d 0%, #000 100%);
    /* W3C */
    
    background: radial-gradient(ellipse at center, #45484d 0%, #000 100%);
    /* IE6-9 fallback on horizontal gradient */
    
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#45484d', endColorstr='#000000', GradientType=1);
}
#container {
    margin: auto;
    text-align: center;
}
svg path {
    stroke-dasharray: 100% 100%;
    animation: dash 6s ease-in-out infinite;
}
@keyframes dash {
    0%, 10%, 90%, 100% {
        stroke-dashoffset: 100%;
    }
    50% {
        stroke-dashoffset: 0%;
    }
}

HTML

把svg线条绘制在canvas上，通过css3添加动画。

canvas，light，教程

编辑器支持Emmet

快捷键

把svg线条绘制在canvas上，通过css3添加动画。

canvas，light，教程

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：