Canvas_鼠标移动炫彩小球

2017-04-06  本文已影响39人  横冲直撞666

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>canvas</title>

    <style type="text/css">

        *{

            margin: 0;

            padding: 0;

        }

        img{

            border:0;

        }

        ol, ul ,li{list-style: none;}

        canvas{

            border: 1px solid #000;

        }

    </style>

</head>

<body>

    <canvas id="mycanvas" width="1000" height="600"></canvas>

    <script type="text/javascript">

 

        var mycanvas = document.getElementById("mycanvas");

        var ctx = mycanvas.getContext("2d");

        //圆形类

         function Circle(x,y,r,color){

            this.x = x;

            this.y = y;

            this.r = r;

            // 颜色的取值范围

            this.color = "rgb("+ (parseInt(Math.random() * 240 ) + 9) + ","+ (parseInt(Math.random() * 220 )+18) +",203)";

 

            //随机方向

            this.dx = Math.random() * 12 - 7;

            this.dy = Math.random() * 12 - 7;

            //往数组中push自己

            circleArr.push(this);

         }

 

         //渲染

         Circle.prototype.render = function(){

            //新建一条路径

            ctx.beginPath();

            //创建一个圆

            ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, true);

            //设置样式颜色

            ctx.fillStyle = this.color;

            //通过填充路径的内容区域生成实心的图形

            ctx.fill();

         }

 

         //更新

         Circle.prototype.update = function(){

            this.x += this.dx;

            this.y += this.dy;

            this.r--;

            if(this.r < 0){

                for (var i = 0; i < circleArr.length; i++) {

                    if (circleArr[i] === this) {

                        circleArr.splice(i,1);

                    };

                }

                return false;

            }

            return true;

         }

         //创建一个数组

         var circleArr = [];

 

         //鼠标移动事件

         mycanvas.onmousemove = function(event){

            new Circle(event.clientX,event.clientY,30,"orange");

         }

 

         //设置定时器每20毫秒更新和渲染

         setInterval(function(){

            ctx.clearRect(0, 0, 1000, 600)

            for (var i = 0; i < circleArr.length; i++) {

                circleArr[i].update() && circleArr[i].render();

            };

         },20);

 

 

    </script>

</body>

</html>

感兴趣的朋友可以加我好友一起讨论

上一篇 下一篇

猜你喜欢

热点阅读