ES6 学习之 class 及demo 绘制小球

        // 构造函数
        // function Person(name, age) {
        //     this.name = name;
        //     this.age = age;
        // }
        // Person.prototype = {
        //     constructor: Person,
        //     print() {
        //         console.log('我叫' + this.name + ',今年' + this.age + '岁');
        //     }
        // }
        // let person = new Person('张三', 19);
        // console.log(person);

        // 通过class 面向对象
        class Person {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            print() {
                console.log('我叫' + this.name + ',今年' + this.age + '岁');
            }
        }
        let person = new Person('张三', 19);
        console.log(person);
        person.print();

    <canvas id="canvas">当前游览器不支持该版本!</canvas>
    <script src="js/underscor-min.js"></script>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = 1000;
        canvas.height = 600;
        canvas.style.backgroundColor = '#000';

        class Ball {
            // 构造器
            constructor(x, y, color) {
                    this.x = x;
                    this.y = y;
                    this.color = color;
                    this.r = 10;
                }
                // 绘制
            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();
            }
        }
        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;
                }
            }
        }


        // 实例化小球
        let ballArr = [];
        let colorArr = ['red', 'green', 'blue', 'yellow', 'purple', 'pink', 'orange'];
        // 监听鼠标移动
        canvas.addEventListener('mousemove', function(e) {
            ballArr.push(new MoveBall(e.offsetX, e.offsetY, colorArr[_.random(0, colorArr.length - 1)]));
            console.log(ballArr);
        });
        // 开启定时器
        setInterval(function() {
            // 清屏
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            // 绘制
            for (let i = 0; i < ballArr.length; i++) {
                ballArr[i].render();
                ballArr[i].upDate();
            }
        }, 50)