运用ES6制作绚丽的小球

最新推荐文章于 2020-12-29 08:30:44 发布

前端阳光

最新推荐文章于 2020-12-29 08:30:44 发布

阅读量246

点赞数

分类专栏：前端 js ES6 文章标签：绚丽小球的制作 es6 html5 绚丽小球 css

本文链接：https://blog.csdn.net/weixin_43964148/article/details/84830090

版权

前端同时被 3 个专栏收录

95 篇文章 8 订阅

订阅专栏

17 篇文章 1 订阅

订阅专栏

ES6

3 篇文章 0 订阅

订阅专栏

本文通过ES6技术详细介绍了如何制作出引人注目的小球动画效果，结合HTML5和CSS，为网页增添视觉亮点。

摘要由CSDN通过智能技术生成

运用ES6制作绚丽的小球

**
在这里插入图片描述
代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../underscore.js"></script>
    <style>
        #canvas{
            margin: auto 0;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById("canvas");
    const ctx=canvas.getContext("2d");
    canvas.width=1500;
    canvas.height=1000;
    canvas.style.backgroundColor="black"

    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();

            }
        }

        //会移动的小球类
    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(3,5);
        }

        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","white","orange","pink","green","blue","yellow"];

    //监听鼠标的移动
    canvas.addEventListener("mousemove",function (e) {
         e=e||event;
        ballArr.push(new moveBall(e.offsetX,e.offsetY,colorArr[_.random(0,colorArr.length-1)]));
    })

    //开启定时器
    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)

</script>
</body>
</html>

前端阳光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
运用ES6制作绚丽的小球

**运用ES6制作绚丽的小球**代码展示&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="../undersco
复制链接

扫一扫

专栏目录