Canvas复刻李峋爱心代码

waahah

使用Javascript创建Canvas画板实现李峋同款爱心特效

核心思路及实现代码：

var context = canvas.getContext('2d'),
        particles = new ParticlePool(settings.particles.length),
        particleRate = settings.particles.length / settings.particles.duration, // particles/sec
        time;

    // get point on heart with -PI <= t <= PI
    function pointOnHeart(t) {
        return new Point(
            160 * Math.pow(Math.sin(t), 3),
            130 * Math.cos(t) - 50 * Math.cos(2 * t) - 20 * Math.cos(3 * t) - 10 * Math.cos(4 * t) + 25
        );
    }

    // creating the particle image using a dummy canvas
    var image = (function () {
        var canvas = document.createElement('canvas'),
            context = canvas.getContext('2d');
        canvas.width = settings.particles.size;
        canvas.height = settings.particles.size;
        // helper function to create the path
        function to(t) {
            var point = pointOnHeart(t);
            point.x = settings.particles.size / 2 + point.x * settings.particles.size / 350;
            point.y = settings.particles.size / 2 - point.y * settings.particles.size / 350;
            return point;
        }
        // create the path
        context.beginPath();
        var t = -Math.PI;
        var point = to(t);
        context.moveTo(point.x, point.y);
        while (t < Math.PI) {
            t += 0.01; // baby steps!
            point = to(t);
            context.lineTo(point.x, point.y);
        }
        context.closePath();
        // create the fill
        // context.fillStyle = '#c88ffe';
        context.fillStyle = '#ffc0cb';
        context.fill();
        // create the image
        var image = new Image();
        image.src = canvas.toDataURL();
        return image;
    })();

    // render that thing!
    function render() {
        // next animation frame
        requestAnimationFrame(render);

        // update time
        var newTime = new Date().getTime() / 1000,
            deltaTime = newTime - (time || newTime);
        time = newTime;

        // clear canvas
        context.clearRect(0, 0, canvas.width, canvas.height);

        // create new particles
        var amount = particleRate * deltaTime;
        for (var i = 0; i < amount; i++) {
            var pos = pointOnHeart(Math.PI - 2 * Math.PI * Math.random());
            var dir = pos.clone().length(settings.particles.velocity);
            particles.add(canvas.width / 2 + pos.x, canvas.height / 2 - pos.y, dir.x, -dir.y);
        }

        // update and draw particles
        particles.update(deltaTime);
        particles.draw(context, image);
    }

    // handle (re-)sizing of the canvas
    function onResize() {
        canvas.width = canvas.clientWidth;
        canvas.height = canvas.clientHeight;
    }
    window.onresize = onResize;

    // delay rendering bootstrap
    setTimeout(function () {
        onResize();
        render();
    }, 10);
})(document.getElementById('lovexf'));

运行图片展示

使用方法

双击打开文件夹中的H5.html即可启动看到画面

下载地址

https://wwt.lanzouy.com/io5tI0h3ehvi（lanzoul.com）

mmm8wwwwww

哇塞，这也太帅了。李洵版本里面没字的吧？

Choco1987

相当秀，顶呱呱的页面美学

hkhkhk

正好需要，有没有其他语言的，谢谢分享

Patches

点燃楼主 温暖坛友

leedyx1990

这个必须点赞了

xiguadada

这个必须点赞了

lizf2019

有个建议：把那些要引用的放一个链接呗，下着也方便

waahah

lizf2019 发表于 2022-11-13 18:06
有个建议：把那些要引用的放一个链接呗，下着也方便

呜呜，我刚注册这个平台不知道怎么放一个链接~

D20

下载好怎么用