初遇，打高兴

2024年5月24日 108次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞