es6面向对象编程入门实例---鼠标移动效果

最新推荐文章于 2022-08-10 15:07:46 发布

胡桃夹子夹桃胡

最新推荐文章于 2022-08-10 15:07:46 发布

阅读量373

点赞数

分类专栏： es6 文章标签： es6 面向对象鼠标移动效果

本文链接：https://blog.csdn.net/weixin_38707512/article/details/79584343

版权

es6 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

es6新增面向对象的语法糖，使用class创建对象，下面的这个实例是鼠标移动的时候绘制小球，然后小球向四面八方逐渐变小直至消失，实现的思路就是先构造一个Ball的类，属性包含了球类的初始坐标、球半径，以及绘制球的方法，然后构造一个继承了Ball类的MoveBall，即鼠标移动时，绘制球，同时之前绘制的小球逐渐消失。

css：

    <style>
        body{
            margin: 150px;
        }
        #canvas{
            background-color: black;
        }
    </style>

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

js:(需要引入underscore.js，获得随机数）

    const canvas=document.getElementById('canvas');
    const ctx=canvas.getContext('2d');
    canvas.width=1000;//注意这里不能用css直接定义宽和高
    canvas.height=600;
    class Ball{ //球类
        constructor(x,y,color){
            this.x=x;
            this.y=y;
            this.color=color;
            this.r=50;//初始半径为50
        }
        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{//MoveBall继承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 arrBall=[];//小球对象的数组，鼠标移动时创建MoveBall对象插入数组，每50ms遍历数组，绘制小球，同时让小球的半径和位置发生变化，直至小球半径为0
     let arrColor=['red','pink','blue','white','green','orange'];//自定义的小球颜色
     canvas.addEventListener('mousemove',function (e) {
        arrBall.push(new MoveBall(e.offsetX,e.offsetY,arrColor[_.random(0,arrColor.length-1)]))
    });
    setInterval(function () {
        //每次执行函数时都要清理canvas，否则小球消失的痕迹都会留在canvas里
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for(let i=0;i<arrBall.length;i++){
            arrBall[i].render();
            arrBall[i].upDate();
        }
    },50)

胡桃夹子夹桃胡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
es6面向对象编程入门实例---鼠标移动效果

es6新增面向对象的语法糖，使用class创建对象，下面的这个实例是鼠标移动的时候绘制小球，然后小球向四面八方逐渐变小直至消失，实现的思路就是先构造一个Ball的类，属性包含了球类的初始坐标、球半径，以及绘制球的方法，然后构造一个继承了Ball类的MoveBall，即鼠标移动时，绘制球，同时之前绘制的小球逐渐消失。css： &lt;style&gt; body{ ...
复制链接

扫一扫