html--鼠标跟随特效

fo安方

于 2024-04-26 06:37:48 发布

阅读量1.2k

点赞数 14

分类专栏： html 文章标签： html 前端

本文链接：https://blog.csdn.net/stqer/article/details/138105914

版权

html 专栏收录该内容

155 篇文章 55 订阅

订阅专栏

本文介绍了一段使用HTML5Canvas和JavaScript实现的代码，通过鼠标移动实时生成并绘制出彩虹色的Hypotrochoid图形，同时响应键盘事件改变颜色模式。

摘要由CSDN通过智能技术生成

<!DOCTYPE html > 
<head>
 <title></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 * 999>>0)/999;
        r=(e.pageY/H * 999>>0)/999;
        U=e.pageX/H * 360 >>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); // center on xy coords
                y = (R - r) * S(t) - D * S(q) + (B + (Y - B) * (i / 25));
                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 style="margin:0px;">
<canvas id="c"></canvas>
</body>
</html>