初遇，打开心

2024年2月7日 180次阅读 来源: Yakun

第一次相遇：见到大神漂亮的首页，顿时折服，为了做这个忠实粉，我来了！
我喜欢具有画面感的东西，看到很漂亮的就会很兴奋，高兴好久，希望在这里遇见更多我喜欢的东西，大家共勉。
把心拿出来：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>初遇，打开心</title>
    </head>
    <body>
        <canvas width="1999" height="1111">爱你不过，请升级</canvas>
    </body>
    <script>
        var canvas = document.querySelector("canvas");
        var context = canvas.getContext("2d");
        var cx = canvas.width;
        var cy = canvas.height;
        var timer = null;

        function heart() {
            context.clearRect(0, 0, cx, cy);
            for(var i = 0; i < 22; i++) {
                // 坐标
                var body = document.querySelector("body");
                var x = Math.random() * body.clientWidth;
                var y = Math.random() * body.clientHeight;
                var r = Math.random() * 10 + 5;
                //随机色
                var colorOne = parseInt(Math.random() * 255);
                var colorTwo = parseInt(Math.random() * 255);
                var colorThree = parseInt(Math.random() * 255);
                // 绘制心
                context.beginPath();
                context.fillStyle = 'rgba(' + colorOne + ',' + colorTwo + ',' + colorThree + ',0.4)';

                context.moveTo(x, y);
                context.bezierCurveTo(x - 20, y - 10, x - 20, y + 20, x, y + 30);

                context.moveTo(x, y);
                context.bezierCurveTo(x + 20, y - 10, x + 20, y + 20, x, y + 30);
                context.fill();
                context.stroke();
            }
        }
        timer = setInterval(heart, 500);
    </script>
</html>
    原文作者：Yakun
    原文地址: https://segmentfault.com/a/1190000007342841
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞