Pure JS和Canvas 光线目标探测器

Light brite。可以学习到鼠标跟踪（follow the mouse），改变大小（size change）以及颜色深度（color depth）。参考阅读： 1. http:seb.ly/2011/02/html5-canvas-3d-particles-uniform-distribution/ 2. https://www.khanacademy.org/computer-programming/particle-system/6379895271194624

light

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1807
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

//Global variables
p = new Array();
mx = 0; // mouse x
my = 0; // mouse y	
radius = 1; // radius
coef = 0; // coef
w = 0; // canvas width
h = 0; // canvas height.
ra = 5; // particle size.

//Class Pa for particle.
function Pa(ox, oy, c, s) {
    this.x = 0; // center x coordinate
    this.y = 0; // center y coordinate
    this.ox = ox; // offset x
    this.oy = oy; // offset y
    this.c = c; // colour
    this.speed = s; // speed
    this.sx = 0; // shake x
    this.sy = 0; // shake y
}

//Program start
window.onload = function() {
    a = document.getElementById('canv');
    c = a.getContext('2d');

w = a.width;
    h = a.height;
    mx = w / 2;
    my = h / 2;

a.addEventListener('mousemove', function(evt) {
        var r = a.getBoundingClientRect();
        mx = evt.clientX - r.left;
        my = evt.clientY - r.top;

// 0,0 is the center of canvas.
        dx = w / 2 - mx;
        dy = h / 2 - my;

coef = Math.sqrt(dx * dx + dy * dy) / ((w + h) / 14);

// If mouse_y is near top or bottom change particle's size. 
        if (my < h * 0.3 && ra > 1)
            ra--;

if (my > h * 0.7 && ra < 10)
            ra++;
    }, false);

// loop function that recycles "for"
    myLoop(0);

// Animate
    animate();
};

// Clear canvas, update positions.
function animate() {
    c.clearRect(0, 0, w, h);

myLoop(1);

// Canvas rectangle
    c.beginPath();
    c.lineWidth = 1;
    c.rect(0, 0, w, h);
    c.stroke();

window.setTimeout(animate, 16);
}

//Perform initialization or update positions. Hack - recycle the function.
//functionality=0 then function update positions.
//functionality=1 then function does initialization.
function myLoop(functionality) {
    for (var i = 500; i >= 0; i--) {
        if (functionality) {
            // Reduce code- there are many places that use p[i].
            l = p[i];

// Update position using custom Xenon theorem (half path between two points)
            // in this case a proportional distance between source and target given by .t
            l.x += (mx - l.x) / l.speed;
            l.y += (my - l.y) / l.speed;

l.sx = Math.random();
            l.sy = Math.random();
            c.beginPath();

// Use "arc" to draw circle, but 6.28318-coef for special effect.
            c.arc(l.x + l.ox + l.sx, l.y + l.oy + l.sy, ra, 0, 6.28318 - coef);
            c.fillStyle = l.c;
            c.fill();
            c.strokeStyle = l.c;
            c.stroke();
        } else {
            // Convert to radian.(will effect length/width of system
            angle = (137.5077 * Math.PI / 180 * i);

// Each 5 loops, perform radius variation. Higher the mod #, narrower the partical tunnel
            if ((i % 6) == 0)
                radius += 2;

// Hack: use speed to generate color and make it depend on radius.
            speed = radius + 4;

// Create and initialize particle item. 
            pr = new Pa(
                Math.cos(angle) * radius,
                Math.sin(angle) * radius,
                'rgba(' + speed * 4 + ',' + speed + ',' + speed * 12 + ',' + (0.8) + ')',
                speed);
            p.push(pr);
        }
    }
}

编译

CSS

HTML

light

编辑器支持Emmet

快捷键

light

HTML5 Canvas 聚光灯（Spotlight）特效

HTML5/Canvas两点之间的电弧线 | 闪电

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：