• 设为首页
  • 收藏本站
  • 积分充值
  • VIP赞助
  • 手机版
  • 微博
  • 微信
    微信公众号 添加方式：
    1:搜索微信号（888888）
    2:扫描左侧二维码
  • 登录 立即注册
    • 切换风格
    快捷导航
    福建二哥 › 门户 › 查看主题

    Canvas跟随鼠标炫彩小球的实现

    发布者: 雪落无声 | 发布时间: 2025-6-16 12:23| 查看数: 128| 评论数: 0|帖子模式

    跟随鼠标炫彩小球
    1. canvas没有让我失望，真的很有意思
    复制代码
    实现效果

    超级炫酷

    实现原理

         
    • 创建小球   
    • 给小球添加随机颜色，随机半径   
    • 鼠标移动通过实例化，新增小球   
    • 通过调用给原型新增的方法，来实现小球的动画效果   
    • 通过定时器不断地更新画布
    实现过程

    创建小球

    通过创建函数收纳小球所有的样式，再通过实例化函数，将鼠标当前的位置传递给
    1. Ball
    复制代码
    函数，让通过实例化创建出来的小球，最后将创建出来的小球存入数组中，数组中以对象形式存放着每个小球的属性和属性值
    1. function Ball(x, y, r) {
    2.     this.x = x;
    3.     this.y = y;
    4.     this.r = r;
    5.     this.color = getRandom();//随机生成颜色
    6.     this.dx = parseInt(Math.random() * 10) - 5;//生成随机移动的位置
    7.     this.dy = parseInt(Math.random() * 10) - 5;//`-5`是让小球能向四周随机移动
    8.     ballArr.push(this);//添加小球
    9. }
    10. //监听鼠标移动事件
    11. canvas.addEventListener('mousemove', function (e) {
    12.     new Ball(e.offsetX, e.offsetY, parseInt(Math.random() * 20));
    13.     /*实例化Ball为Ball对象通过__proto__来调用原型的方法*/
    14. })
    复制代码
    生成随机颜色
    1. 对于[code]color
    复制代码
    这个属性，可以通过6位16进制的值来表示一种颜色[/code]因此，可以通过随机产生一个6位的16进制数来做为随机颜色
    将
    1. 0到f
    复制代码
    这16个数存入数组中，通过随机生成6个
    1. 0到16
    复制代码
    的索引值，这样就能通过数组的索引号随机的获取6个到
    1. 0到f
    复制代码
    中的数了
    1. [code]split
    复制代码
    的作用是：以括号内的参数为标志符来分割字符串，返回数组[/code]
    1. //设置随机颜色
    2. function getRandom() {
    3.     var allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f';//16进制颜色
    4.     var allTypeArr = allType.split(',');//通过','分割为数组
    5.     var color = '#';
    6.     for (var i = 0; i < 6; i++) {
    7.         //随机生成一个0-16的数
    8.         var random = parseInt(Math.random() * allTypeArr.length);
    9.         color += allTypeArr[random];
    10.     }
    11.     return color;//返回随机生成的颜色
    12. }
    复制代码
    渲染小球
    1. 给函数的原型链中添加[code]render
    复制代码
    方法，让每一个通过
    1. Ball
    复制代码
    函数实例化出来的对象，带有这些方法[/code]这个函数的作用是，通过
    1. Ball
    复制代码
    的参数生成一个圆形，在实例化的时候，会生成一个对象，这个对象里就存放的
    1. x,y,r
    复制代码
    这些值
    1. Ball.prototype.render = function () {
    2.     ctx.beginPath();//路径开始
    3.     ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);//画圆，位置，半径
    4.     ctx.fillStyle = this.color;//颜色
    5.     ctx.fill();//填充
    6. }
    复制代码
    更新小球信息

    因为生成的小球
    1. x,y,r
    复制代码
    是固定的，所以小球的位置也是固定的，不会改变
    因此需要通过改变每个小球的位置和半径让小球动起来，当小球的半径小于0时，调用
    1. remove
    复制代码
    方法将小球从数组中删除
    1. /* 更新小球位置和半径 小于0时清除 */
    2. Ball.prototype.update = function () {
    3.     this.x += this.dx;//x改变
    4.     this.y += this.dy;//y改变
    5.     this.r -= 0.1;//半径减小
    6.     if (this.r < 0) {
    7.         this.remove();//调用添加的remove方法
    8.     }
    9. }
    复制代码
    删除小球

    这是上面调用的
    1. remove
    复制代码
    方法，当this也就是当前小球半径小于0时i，遍历整个数组，找到这个this，也就是”这个小球“，通过调用数组中的方法，删除掉数组的这个元素
    1. splice(index,num) 方法可删除从 index 处开始删除num个元素
    复制代码
    1. Ball.prototype.remove = function () {
    2.     for (var i = 0; i < ballArr.length; i++) {
    3.         if (ballArr[i] == this) {
    4.             ballArr.splice(i, 1);//找到这个小于0 的元素，删除
    5.         }
    6.     }
    7. }
    复制代码
    渲染画布

    通过定时器，不断的更新画布，主要是这几个步骤
         
    • 清除画布   
    • 遍历数组，获取到所有小球的信息，渲染到画布上   
    • 不断的重复调用，更新小球信息
    1. setInterval(function () {
    2.     ctx.clearRect(0, 0, canvas.width, canvas.height);//清屏
    3.     for (var i = 0; i < ballArr.length; i++) {
    4.         ballArr[i].update();//更新小球
    5.         if (ballArr[i]) {
    6.             ballArr[i].render();//渲染小球
    7.         }
    8.     }
    9. }, 20);
    复制代码
    完整代码
    1. <!DOCTYPE html>
    2. <html lang="en">

    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Document</title>
    9.     <style>
    10.         body {
    11.             background: black;
    12.         }
    13.         canvas {
    14.             display: block;
    15.             border: 1px solid black;
    16.             margin: 0 auto;
    17.         }
    18.     </style>
    19. </head>

    21. <body>
    22.     <canvas width="1000px" height="1000px" id="myCanvas">
    23.         当前浏览器版本不支持，请升级浏览器
    24.     </canvas>
    25.     <script>
    26.         var canvas = document.getElementById('myCanvas');
    27.         var ctx = canvas.getContext('2d');
    28.         //定义球的位置和半径
    29.         function Ball(x, y, r) {
    30.             this.x = x;
    31.             this.y = y;
    32.             this.r = r;
    33.             this.color = getRandom();//随机生成颜色
    34.             this.dx = parseInt(Math.random() * 10) - 5;//生成随机移动的位置
    35.             this.dy = parseInt(Math.random() * 10) - 5;
    36.             ballArr.push(this);//添加小球
    37.         }
    38.         /* 更新小球位置和半径 小于0时清除 */
    39.         Ball.prototype.update = function () {
    40.             this.x += this.dx;
    41.             this.y += this.dy;
    42.             this.r -= 0.1;
    43.             if (this.r < 0) {
    44.                 this.remove();//调用添加的remove方法
    45.             }
    46.         }
    47.         Ball.prototype.remove = function () {
    48.             for (var i = 0; i < ballArr.length; i++) {
    49.                 if (ballArr[i] == this) {
    50.                     ballArr.splice(i, 1);//找到这个小于0 的元素，删除
    51.                 }
    52.             }
    53.         }
    54.         //渲染小球 画小球
    55.         //在原型中添加方法
    56.         Ball.prototype.render = function () {
    57.             ctx.beginPath();//路径开始
    58.             ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);//画圆，位置，半径
    59.             ctx.fillStyle = this.color;//颜色
    60.             ctx.fill();
    61.         }
    62.         //监听鼠标移动事件
    63.         canvas.addEventListener('mousemove', function (e) {
    64.             new Ball(e.offsetX, e.offsetY, parseInt(Math.random() * 20));
    65.             //实例化Ball为Ball对象通过__proto__来调用原型的方法
    66.             console.log(ballArr);
    67.         })
    68.         var ballArr = [];
    69.         setInterval(function () {
    70.             ctx.clearRect(0, 0, canvas.width, canvas.height);//清屏
    71.             for (var i = 0; i < ballArr.length; i++) {
    72.                 ballArr[i].update();//更新小球
    73.                 if (ballArr[i]) {
    74.                     ballArr[i].render();//渲染小球
    75.                 }
    76.             }
    77.         }, 20);
    78.         //设置随机颜色
    79.         function getRandom() {
    80.             var allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f';//16进制颜色
    81.             var allTypeArr = allType.split(',');//通过','分割为数组
    82.             var color = '#';
    83.             for (var i = 0; i < 6; i++) {
    84.                 var random = parseInt(Math.random() * allTypeArr.length);
    85.                 //随机生成一个0-16的数
    86.                 color += allTypeArr[random];
    87.             }
    88.             return color;//返回随机生成的颜色
    89.         }
    90.     </script>
    91. </body>

    93. </html>
    复制代码
    到此这篇关于Canvas跟随鼠标炫彩小球的实现的文章就介绍到这了,更多相关Canvas跟随鼠标 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

    来源：https://www.jb51.net/html5/770948.html
    免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看，没有账号？立即注册

    ×

    最新评论

    新人须知

    常见问题

    维权申诉

    关注微博

    扫描微信

    关于合作

    通讯联系

    QQ Archiver 手机版 小黑屋 福建二哥 ( 闽ICP备2022004717号|闽公网安备35052402000345号 )

    Powered by Discuz! X3.5 © 2001-2023

    快速回复 返回顶部 返回列表