ES6与canvas实现鼠标小球跟随效果

网页制作 2024/11/16 佚名

3 2 1

最近闲来无聊，看了下ES6的语法，结合canvas实现了动画特效——随着鼠标的移动，会有小球跟随且自动消失的动画。

首先，html部分，目前就一个canvas标签。

 <canvas id="canvas">
         当前浏览器不支持！
 </canvas>

其次，css部分，没有考虑美观，大家喜欢的话，可以自己添加样式

<style>
        body{
            margin: 90px;
        }
        #canvas{
            box-shadow: 0 0 5px;
        }
    </style>

最后，看下js实现部分

<script>
    const canvas = document.getElementById("canvas");
    canvas.height = 600;
    canvas.width = 1000;
    canvas.style.backgroundColor = "#000";
    const ctx = canvas.getContext("2d");
    //小球类
    class Ball{
        constructor(x, y, color){
            this.x = x;
            this.y = y;
            this.color = color;
            //小球半径默认40
            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 = Math.floor(Math.random()*5+1);
            this.dY = Math.floor(Math.random()*5+1);
            this.dR = Math.floor(Math.random()*5+1);
        }
        upData(){
            this.x += this.dX;
            this.y += this.dY;
            this.r -= this.dR;
            if(this.r < 0){
                this.r = 0;
            }
        }
    }
    let ballArry = [];
    let colorArry = ['red', 'green', 'pink', 'yellow', 'blue'];
    canvas.addEventListener("mousemove",function(e){
        ballArry.push(new MoveBall(e.offsetX, e.offsetY, colorArry[Math.floor(Math.random()*5)]));
    })
    setInterval(function(){
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for(let i=0;i<ballArry.length;i++){
            ballArry[i].render();
            ballArry[i].upData();
        }
    },50);
    </script>

稍作解释下我的设计思路：

首先，获取canvas对象，获取上下文，设置一些基本的属性。（canvas不做过多描述，具体的可以去w3自己研究）。然后，先定义一个Ball的类，里面有小球的圆心坐标位置，以及半径和颜色。在定义一个画小球的方法，具体的画圆实现，不懂的可以去canvas文档自己去看。

在定义一个会变的小球类并继承Ball类。里面会有更新小球状态的方法，用来改变小球的半径以及颜色属相。

最后，开启一个定时器，当鼠标移动时，把生成的小球存储到数组中，然后遍历循环读取小球，并改变小球的样式，达到最终的效果。

最后附上完整代码。直接拷贝浏览器运行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>会动的小球</title>
    <style>
        body{
            margin: 90px;
        }
        #canvas{
            box-shadow: 0 0 5px;
        }
    </style>
</head>
<body>
    <canvas id="canvas">
        当前浏览器不支持！
    </canvas>
    <script>
    const canvas = document.getElementById("canvas");
    canvas.height = 600;
    canvas.width = 1000;
    canvas.style.backgroundColor = "#000";
    const ctx = canvas.getContext("2d");
    //小球类
    class Ball{
        constructor(x, y, color){
            this.x = x;
            this.y = y;
            this.color = color;
            //小球半径默认40
            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 = Math.floor(Math.random()*5+1);
            this.dY = Math.floor(Math.random()*5+1);
            this.dR = Math.floor(Math.random()*5+1);
        }
        upData(){
            this.x += this.dX;
            this.y += this.dY;
            this.r -= this.dR;
            if(this.r < 0){
                this.r = 0;
            }
        }
    }
    let ballArry = [];
    let colorArry = ['red', 'green', 'pink', 'yellow', 'blue'];
    canvas.addEventListener("mousemove",function(e){
        ballArry.push(new MoveBall(e.offsetX, e.offsetY,         colorArry[Math.floor(Math.random()*5)]));
    })
    setInterval(function(){
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for(let i=0;i<ballArry.length;i++){
            ballArry[i].render();
            ballArry[i].upData();
        }
    },50);
    </script>
</body>
</html>

总结

以上所述是小编给大家介绍的ES6与canvas实现鼠标小球跟随鼠标效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

canvas,小球跟着鼠标,,canvas鼠标跟随

标签：

canvas,小球跟着鼠标,,canvas鼠标跟随

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

岱庙资源网 Copyright www.zgmyg.com

评论“ES6与canvas实现鼠标小球跟随效果”

ES6与canvas实现鼠标小球跟随效果

暂无“ES6与canvas实现鼠标小球跟随效果”评论...

www.zgmyg.com 岱庙资源网

129,905影音资源

244,626技术资源

111,817软件资源

578,645站长资源

ES6与canvas实现鼠标小球跟随效果

canvas,小球跟着鼠标,,canvas鼠标跟随

CSS理解块级格式上下文（BFC）

css3 仿写阿里云水纹效果的示例代码

评论“ES6与canvas实现鼠标小球跟随效果”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

ES6与canvas实现鼠标小球跟随效果

canvas,小球跟着鼠标,,canvas鼠标跟随

CSS理解块级格式上下文（BFC）

css3 仿写阿里云水纹效果的示例代码

评论“ES6与canvas实现鼠标小球跟随效果”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存