canvas制作呼吸灯

最新推荐文章于 2023-04-13 17:07:29 发布

徐同保

最新推荐文章于 2023-04-13 17:07:29 发布

阅读量1.4k

点赞数 2

分类专栏： web前端前端技术分享文章标签： canvas制作呼吸灯

本文链接：https://blog.csdn.net/xutongbao/article/details/82457134

版权

web前端同时被 2 个专栏收录

735 篇文章 15 订阅

订阅专栏

前端技术分享

251 篇文章 3 订阅

订阅专栏

<!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>

徐同保

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas制作呼吸灯

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;canvas制作呼吸灯&lt;/title&gt; &lt;style type="text/css"&amp
复制链接

扫一扫