es6——class运用-绚丽小球-面向对象版本

css

        body {
            margin: 150px;
        }
        #father{
            position: relative;
        }
        #canvas {
            box-shadow: 0 0 10px;
            position: absolute;
            top: 0;
            left: 0;
        }
        #btn{
            margin: 10px;
            width: 100px;
            height: 50px;
            position: absolute;
            top: 0;
            right: 0;
        }

html

<div id="father">
    <canvas id="canvas">当前浏览器不支持该版本</canvas>
    <button id="btn">surprise</button>
</div>

js（需要引入underscore）

    <script src="../../frame/underscore/underscore.js"></script>
    <script>
        window.onload = function () {
            //1.获取当前画布
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');
            canvas.width = 1000;
            canvas.height = 600;
            canvas.style.backgroundColor = 'black';

            //2.小球类
            class Ball {
                constructor(x, y, color) {
                    this.x = x;
                    this.y = y;
                    this.color = color;
                    this.r = 40;
                }

                /**
                 * 绘制小球
                 */
                render() {
                    ctx.save();
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
                    ctx.fillStyle = this.color;
                    ctx.fill();
                    ctx.restore();
                }
            }

            //3.会移动的小球类
            class MoveBall extends Ball {
                constructor(x, y, color) {
                    super(x, y, color);

                    //量的变化
                    this.dX = _.random(-5, 5);
                    this.dY = _.random(-5, 5);
                    this.dR = _.random(1, 3);
                }

                upDate() {
                    this.x += this.dX;
                    this.y += this.dY;
                    this.r -= this.dR;
                    if (this.r < 0) {
                        this.r = 0;
                    }
                }
            }

            //4.实例化小球
            let ballArr = [];
            let colorArr = ['red', 'green', 'blue', 'skyblue', 'yellow', 'pink', 'orange'];

            //5.监听鼠标移动
            canvas.addEventListener('mousemove', function (e) {
                ballArr.push(new MoveBall(e.offsetX,e.offsetY,colorArr[_.random(0,colorArr.length-1)]));
                console.log(ballArr);
            });

            //6.开启定时器
            //选择是否清屏
            let check=true;
            let btn=document.getElementById('btn');
            btn.onclick=function(){
                check=!check;
            };
            setInterval(function(){
                //清屏
                if(check){
                    ctx.clearRect(0,0,canvas.width,canvas.height);
                }

                //绘制
                for(let i=0;i<ballArr.length;i++){
                    ballArr[i].render();
                    ballArr[i].upDate();
                }
            },50)
        }
    </script>