分享个好东西
  • 板块灌水区
  • 楼主封禁用户
  • 当前回复22
  • 已保存回复22
  • 发布时间2019/7/10 06:38
  • 上次更新2024/7/10 13:30:09
查看原帖
分享个好东西
125665
封禁用户楼主2019/7/10 06:38

把一下代码粘贴到一个HTML中，你会获得成就：烟花缭乱

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
 <title>JS1k: Breathing Galaxies (1013 bytes)</title>
 <script type="text/javascript">
window.onload = function () {
    C = Math.cos; // cache Math objects
    S = Math.sin;
    U = 0;
    w = window;
    j = document;
    d = j.getElementById("c");
    c = d.getContext("2d");
    W = d.width = w.innerWidth;
    H = d.height = w.innerHeight;
    c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)
    c.globalCompositeOperation = "lighter"; // switch to additive color application
    c.lineWidth = 0.2;
    c.lineCap = "round";
    var bool = 0, 
        t = 0; // theta
    d.onmousemove = function (e) {
        if(window.T) {
            if(D==9) { D=Math.random()*15; f(1); }
            clearTimeout(T);
        }
        X = e.pageX; // grab mouse pixel coords
        Y = e.pageY;
        a=0; // previous coord.x
        b=0; // previous coord.y 
        A = X, // original coord.x
        B = Y; // original coord.y
        R=(e.pageX/W * 333>>0)/333;
        r=(e.pageY/H * 333>>0)/333;
        U=e.pageX/H * 180 >>0;
        D=9;
        g = 360 * Math.PI / 180;
        T = setInterval(f = function (e) { // start looping spectrum
            c.save();
            c.globalCompositeOperation = "source-over"; // switch to additive color application
            if(e!=1) {
                c.fillStyle = "rgba(0,0,0,0.02)";
                c.fillRect(0, 0, W, H); // resize <canvas> and draw black rect (default)
            }
            c.restore();
            i = 25; while(i --) {
                c.beginPath();
                if(D > 450 || bool) { // decrease diameter
                    if(!bool) { // has hit maximum
                        bool = 1;
                    }
                    if(D < 0.1) { // has hit minimum
                        bool = 0;
                    }
                    t -= g; // decrease theta
                    D -= 0.1; // decrease size
                }
                if(!bool) {
                    t += g; // increase theta
                    D += 0.1; // increase size
                }
                q = (R / r - 1) * t; // create hypotrochoid from current mouse position, and setup variables (see: http://en.wikipedia.org/wiki/Hypotrochoid)
                x = (R - r) * C(t) + D * C(q) + (A + (X - A) * (i / 25)) + (r - R) - 1; // center on xy coords
                y = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25)) - 1;
                if (a) { // draw once two points are set
                    c.moveTo(a, b);
                    c.lineTo(x, y)
                }
                c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)"; // draw rainbow hypotrochoid
                c.stroke();
                a = x; // set previous coord.x
                b = y; // set previous coord.y
            }
            U -= 0.5; // increment hue
            A = X; // set original coord.x
            B = Y; // set original coord.y
        }, 16);
    }
    j.onkeydown = function(e) { a=b=0; R += 0.05 }
    d.onmousemove({pageX:300, pageY:290})
}
 
</script>
</head>
<body>
<canvas id="c"></canvas>
</body>
</html>
2019/7/10 06:38