canvas制作呼吸灯

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>canvas制作呼吸灯</title>
    <style type="text/css">
    </style>
</head>

<body>
    <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
        Your browser does not support the HTML5 canvas tag.
    </canvas>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");    
    var p = [0, 0.5], t_last = 0;
    var w = canvas.width;
    var h = canvas.height;    

    $(function () {
        var myAction = {};

        $.extend(myAction, {
            draw: function (r) {
                ctx.clearRect(0, 0, w, h);

                ctx.save();

                ctx.lineWidth = 1;
                ctx.strokeStyle = "rgba(105, 159, 169, 1)";
                ctx.fillStyle = "rgba(105, 159, 169, 0.4)";
                ctx.beginPath();
                ctx.arc(150, 75, r[0] * 30, 0, 2 * Math.PI);
                ctx.fill();
                ctx.stroke();

                ctx.beginPath();
                ctx.arc(50, 75, r[1] * 30, 0, 2 * Math.PI);
                ctx.fill();
                ctx.stroke();                

                ctx.restore();
            },                         
            step: function () {
                var temp = [0, 0];
                for (var i = 0; i < p.length; i++) {
                    if (p[i] <= 0.98) {
                        p[i] = p[i] + 0.02;
                        temp[i] = p[i];
                    } else if (p[i] <= 1.98) {
                        p[i] = p[i] + 0.02;
                        temp[i] = 2 - p[i];
                    } else {
                        p[i] = 0;
                    }                    
                }

                
                myAction.draw(temp);
                setTimeout(function () {
                    myAction.step();
                }, 50)
            }           
        });

        var init = function () {
            myAction.step();
        }();
    });
    </script>
</body>

</html>
猜你喜欢
