74行代码实现浪漫的红心下落的动画效果

Jerry Wang

发布于 2022-08-07 15:09:26

4020

发布于 2022-08-07 15:09:26

七夕节快到了，让我们使用 74 行的纯 HTML/JavaScript 代码，实现一个浪漫的红心下落的动画效果吧。

将下列代码粘贴到一个空白的 html 文件里，用浏览器本地打开即可。

<html>
<canvas></canvas>
<script>
    var c = document.getElementsByTagName('canvas')[0];
    var b = document.body;
    var a = c.getContext('2d');
    function d(b, c, d, e) {
        a.fillStyle = b;
        a.beginPath();
        a.arc(c, d, e, 0, 2 * m.PI, !0);
        a.fill();
        a.fillRect(c, d, 1, 1)
    }
    m = Math;
    r = m.random;
    g = Date;
    l = +(new g);
    e = document;
    q = e.createElement("canvas");
    w = e.createElement("canvas");
    o = {};
    h = 100;
    H = 200;
    v = window;
    t = c.width = v.innerWidth;
    u = c.height = v.innerHeight - 5;
    b.setAttribute("style", "margin:0;background:#000");
    k = a;
    q.width = q.height = h;
    w.width = 1e3;
    w.height = H;
    for (j = 0; ++j < H; ) {
        for (i = 0; 1e3 > ++i; )
            a = q.getContext("2d"),
            z = .5 - i / h,
            f = j / h - .5 + .4 * m.sqrt(m.abs(z)),
            f = z * z + 2 * f * f,
            .23 > f && d(.16 < f ? "#F00" : "#F88", i, j, 0),
            a = w.getContext("2d"),
            d(j > 5e-4 * i * i - .3 * i + h ? "#343" : j > 4e-4 * i * i - .9 * i + 500 ? "#232" : "#000", i, j, 0);
        o[j] = {
            x: r() * t,
            y: -h - r() * u,
            b: 51 - j / 4,
            a: 25 + .4 * j
        };
        o[H + j] = {
            x: r() * t,
            y: r() * u - H,
            a: 3 * r() + 1,
            c: j
        }
    }
    a = k;
    v.setInterval(function() {
        n = +(new g);
        a.clearRect(0, 0, t, u);
        d("#FFA", H, 250, 150);
        d("#000", 270, 320, h);
        a.drawImage(w, 0, u - H, t, H);
        for (i = 0; ++i < H; )
            f = (n - l) / h,
            s = o[H + i],
            d("#FFA", s.x, s.y, m.floor(m.max(s.a + m.sin(s.c++ / 10) - .5, 1))),
            z = o[i],
            a.drawImage(q, z.x += -.1 / (z.b / h) * f, z.y += (5 - z.b / 10) * f, z.a, z.a),
            z.y > u && (z.y = -h),
            z.x < -H && (z.x = t);
        l = n
    }, 60)
    //L<3
</script>

</html>

效果如下：

下面是具体的代码解析。

首先在 html 里定义 `canvas` 标签，这是 HTML5 在网页上绘制通信的接口元素。`canvas` 本身没有图形绘制功能，因此我们必须首先用 `document.getElementsByTagName` 拿到这个元素的实例，然后通过 JavaScript 来操纵它绘图。

var a = c.getContext('2d');

getContext("2d") 返回的对象是内建的 HTML5 对象，类型为 `CanvasRenderingContext2D`，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

接下来的这个函数，封装了一个使用 `CanvasRenderingContext2D` 对象进行的画图操作。

- a.fillStyle = b 将绘制的图形进行染色，颜色值通过参数 b 传入。

- a.beginPath: 每当开始一个新的图形绘制时，需要调用 Canvas 2D API 这个方法，相当于现实生活中会话的落笔动作。

例子：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// First path
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.stroke();

- a.arc: 这是Canvas 2D API 绘制圆弧路径的方法。

语法：void ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

圆弧路径的圆心在 (x, y) 位置，半径通过参数 raduis 指定，根据anticlockwise 布尔值（默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束。

因此，这个高亮方法，在函数 d 的输入参数 c 和 d 指定的坐标为圆形，以 e 为半径，顺时针方向绘制一个圆形( 2 * m.PI 代表 360 度) 。!0 即 true.