Canvas 三角形旋转光线

Canvas Triangle Light

canvas，三角形

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var c = document.getElementById('c'),
    ctx = c.getContext('2d'),
    cw = 150,
    ch = 150;

c.width = cw;
c.height = ch;

var rand = function(a, b) {
    return ~~((Math.random() * (b - a + 1)) + a);
}

var path = [{
        x: cw / 2,
        y: (ch / 2 - 50)
    }, {
        x: (cw / 2) - 60,
        y: (ch / 2 + 50)
    }, {
        x: (cw / 2) + 60,
        y: (ch / 2 + 50)
    }],
    particles = [],
    particleCount = 10,
    particleDelayTick = 7,
    particleDelayTickMax = 7,
    hue = rand(0, 360);

var Particle = function(path, speed) {
    this.path = path;
    this.currentPoint = 0;
    this.x = path[0].x;
    this.y = path[0].y;
    this.speed = speed;
}

var updateParticles = function() {
    var i = particles.length;
    while (i--) {
        var p = particles[i];

var onLastPoint = (p.currentPoint === p.path.length - 1);
        var nextPoint = (onLastPoint) ? 0 : p.currentPoint + 1;
        var dx = p.path[nextPoint].x - p.x;
        var dy = p.path[nextPoint].y - p.y;
        var dist = Math.sqrt(dx * dx + dy * dy);
        var angle = Math.atan2(dy, dx);
        var vx = Math.cos(angle) * p.speed;
        var vy = Math.sin(angle) * p.speed;

if (Math.abs(dist) > p.speed) {
            p.x += vx;
            p.y += vy;
        } else {
            p.x = p.path[nextPoint].x;
            p.y = p.path[nextPoint].y;
            p.currentPoint = nextPoint;
        }
    }
}

var eraseIt = function() {
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = 'rgba(0, 0, 0, .4)';
    ctx.fillRect(0, 0, cw, ch);
    ctx.globalCompositeOperation = 'lighter';
}

var loopsIDidItAgain = function() {
    eraseIt();
    createParticles();
    updateParticles();
    renderParticles();
    hue = (hue < 360) ? hue + 1 : 0;
}

setInterval(loopsIDidItAgain, 16);

编译

CSS

HTML

Canvas Triangle Light