html--鼠标跟随特效

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 
    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 
            }
            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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

在这里插入图片描述

相关阅读:
FreeRTOS移植 --- base on gd32f30x + gcc
淘宝天猫京东商品详情一键铺货到拼多多平台店铺接口代码对接教程
点餐小程序实战教程04-用户注册
Babylonjs学习笔记(二)——创建基本材质
Redis常用命令补充和持久化
IDEA
时序预测 | MATLAB实现ICEEMDAN-iMPA-BiLSTM时间序列预测
【Python零基础入门篇 · 20】：面向对象基础（类和对象）
伯恩巴克的广告语录
浅尝项目技术负责人

原文地址：https://blog.csdn.net/stqer/article/details/138105914