Canvas 实现七彩喷泉

最新推荐文章于 2020-07-21 10:00:16 发布

weixin_30352645

最新推荐文章于 2020-07-21 10:00:16 发布

阅读量137

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/sun-rain/p/5774645.html

版权

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>小球 喷泉运动</title>
    <meta name="Keywords" content="关键词1,关键词2">
    <meta name="description" content="果断，是一种教养和能力">
    <!--响应式mate标签-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <style>
        * {
            padding:0;margin:0;
        }
        body{font-size: 14px;}
    </style>
</head>
<body>

    <canvas id="canvas"></canvas>

    <script type="text/javascript">
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");

            //定义画布样式
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            canvas.style.background = "#333";

            var cw = canvas.width;
            var ch = canvas.height;

            //定义小球个数
            var ballNum = 360;
            var r = 0.2;
            //
            var balls = [];
            for(var i=0;i<ballNum;i++){
                var ball = new Ball();
                ball.x = cw/2;
                ball.y = ch;

                ball.vy = Math.random()*-10-10;
                ball.vx = Math.random()*2-1;

                ball.color = getRgb16();
                ball.radius = rangeRandom(1,6);
                balls.push(ball);
            }


            function drawCanvas(ball){
                cw = window.innerWidth;
                ch = window.innerHeight;

                //每个小球方向的改变
                ball.vy += r;
                //每个小球的位置
                ball.x += ball.vx;
                ball.y += ball.vy;

                ball.color = getRgb16();
                ball.radius = rangeRandom(1,6);

                //边界的控制
                if(ball.y-ball.radius > ch ||
                        ball.y+ball.radius<0 ||
                        ball.x-ball.radius > cw ||
                        ball.x+ball.radius<0
                ){
                    //从新初始化
                    ball.x = cw/2;
                    ball.y = ch;
                    ball.vy = Math.random()*-10-10;
                    ball.vx = Math.random()*2-1;
                }
                ball.draw(context);
            }

            setInterval(function () {
                context.clearRect(0,0,cw,ch);
                balls.forEach(function(ball){
                    drawCanvas(ball);
                });
            },33);
        };

        function Ball(){
            this.x = 0;
            this.y = 0;
            this.vx = 0;
            this.vy = 0;
            this.radius = 6;
        }

        Ball.prototype.draw = function(context){
            context.beginPath();
            context.fillStyle = this.color;
            context.arc(this.x,this.y,this.radius,0,Math.PI*2);
            context.fill();
        };


        function getRgb(){
            //0-255
            var r = tRandom(256);
            var g = tRandom(256);
            var b = tRandom(256);
            return "rgb("+r+","+g+","+b+")";
        }


        function getRgb16(){
            //0-255
            var r = tRandom(256).toString(16);
            var g = tRandom(256).toString(16);
            var b = tRandom(256).toString(16);
            if(r.length<2)r=r+""+r;
            if(g.length<2)g=g+""+g;
            if(b.length<2)b=b+""+b;
            return "#"+r+""+g+""+b;
        }

        function rangeRandom(start,end){
            return Math.floor(Math.random()*(end-start+1)+start);
        }

        function tRandom(start){
            return Math.floor(Math.random()*start);
        }
    </script>
</body>


</html>

效果图：

IT技术和行业交流群 417691667

转载于:https://www.cnblogs.com/sun-rain/p/5774645.html

weixin_30352645

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas 实现七彩喷泉

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>小球喷泉运动</title> <meta name="Keyword...
复制链接

扫一扫