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


Posted in Javascript onApril 11, 2021

跟随鼠标炫彩小球

canvas没有让我失望,真的很有意思

实现效果

超级炫酷

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

实现原理

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

实现过程

创建小球

通过创建函数收纳小球所有的样式,再通过实例化函数,将鼠标当前的位置传递给Ball函数,让通过实例化创建出来的小球,最后将创建出来的小球存入数组中,数组中以对象形式存放着每个小球的属性和属性值

function Ball(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.color = getRandom();//随机生成颜色
    this.dx = parseInt(Math.random() * 10) - 5;//生成随机移动的位置
    this.dy = parseInt(Math.random() * 10) - 5;//`-5`是让小球能向四周随机移动
    ballArr.push(this);//添加小球
}
//监听鼠标移动事件
canvas.addEventListener('mousemove', function (e) {
    new Ball(e.offsetX, e.offsetY, parseInt(Math.random() * 20));
    /*实例化Ball为Ball对象通过__proto__来调用原型的方法*/
})

生成随机颜色

对于color这个属性,可以通过6位16进制的值来表示一种颜色

因此,可以通过随机产生一个6位的16进制数来做为随机颜色

0到f这16个数存入数组中,通过随机生成6个0到16的索引值,这样就能通过数组的索引号随机的获取6个到0到f中的数了

split的作用是:以括号内的参数为标志符来分割字符串,返回数组

//设置随机颜色
function getRandom() {
    var allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f';//16进制颜色
    var allTypeArr = allType.split(',');//通过','分割为数组
    var color = '#';
    for (var i = 0; i < 6; i++) {
        //随机生成一个0-16的数
        var random = parseInt(Math.random() * allTypeArr.length);
        color += allTypeArr[random];
    }
    return color;//返回随机生成的颜色
}

渲染小球

给函数的原型链中添加render方法,让每一个通过Ball函数实例化出来的对象,带有这些方法

这个函数的作用是,通过Ball的参数生成一个圆形,在实例化的时候,会生成一个对象,这个对象里就存放的x,y,r这些值

Ball.prototype.render = function () {
    ctx.beginPath();//路径开始
    ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);//画圆,位置,半径
    ctx.fillStyle = this.color;//颜色
    ctx.fill();//填充
}

更新小球信息

因为生成的小球x,y,r是固定的,所以小球的位置也是固定的,不会改变

因此需要通过改变每个小球的位置和半径让小球动起来,当小球的半径小于0时,调用remove方法将小球从数组中删除

/* 更新小球位置和半径 小于0时清除 */
Ball.prototype.update = function () {
    this.x += this.dx;//x改变
    this.y += this.dy;//y改变
    this.r -= 0.1;//半径减小
    if (this.r < 0) {
        this.remove();//调用添加的remove方法
    }
}

删除小球

这是上面调用的remove方法,当this也就是当前小球半径小于0时i,遍历整个数组,找到这个this,也就是”这个小球“,通过调用数组中的方法,删除掉数组的这个元素

splice(index,num) 方法可删除从 index 处开始删除num个元素

Ball.prototype.remove = function () {
    for (var i = 0; i < ballArr.length; i++) {
        if (ballArr[i] == this) {
            ballArr.splice(i, 1);//找到这个小于0 的元素,删除
        }
    }
}

渲染画布

通过定时器,不断的更新画布,主要是这几个步骤

  • 清除画布
  • 遍历数组,获取到所有小球的信息,渲染到画布上
  • 不断的重复调用,更新小球信息
setInterval(function () {
    ctx.clearRect(0, 0, canvas.width, canvas.height);//清屏
    for (var i = 0; i < ballArr.length; i++) {
        ballArr[i].update();//更新小球
        if (ballArr[i]) {
            ballArr[i].render();//渲染小球
        }
    }
}, 20);

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: black;
        }
        canvas {
            display: block;
            border: 1px solid black;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <canvas width="1000px" height="1000px" id="myCanvas">
        当前浏览器版本不支持,请升级浏览器
    </canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        //定义球的位置和半径
        function Ball(x, y, r) {
            this.x = x;
            this.y = y;
            this.r = r;
            this.color = getRandom();//随机生成颜色
            this.dx = parseInt(Math.random() * 10) - 5;//生成随机移动的位置
            this.dy = parseInt(Math.random() * 10) - 5;
            ballArr.push(this);//添加小球
        }
        /* 更新小球位置和半径 小于0时清除 */
        Ball.prototype.update = function () {
            this.x += this.dx;
            this.y += this.dy;
            this.r -= 0.1;
            if (this.r < 0) {
                this.remove();//调用添加的remove方法
            }
        }
        Ball.prototype.remove = function () {
            for (var i = 0; i < ballArr.length; i++) {
                if (ballArr[i] == this) {
                    ballArr.splice(i, 1);//找到这个小于0 的元素,删除
                }
            }
        }
        //渲染小球 画小球
        //在原型中添加方法
        Ball.prototype.render = function () {
            ctx.beginPath();//路径开始
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);//画圆,位置,半径
            ctx.fillStyle = this.color;//颜色
            ctx.fill();
        }
        //监听鼠标移动事件
        canvas.addEventListener('mousemove', function (e) {
            new Ball(e.offsetX, e.offsetY, parseInt(Math.random() * 20));
            //实例化Ball为Ball对象通过__proto__来调用原型的方法
            console.log(ballArr);
        })
        var ballArr = [];
        setInterval(function () {
            ctx.clearRect(0, 0, canvas.width, canvas.height);//清屏
            for (var i = 0; i < ballArr.length; i++) {
                ballArr[i].update();//更新小球
                if (ballArr[i]) {
                    ballArr[i].render();//渲染小球
                }
            }
        }, 20);
        //设置随机颜色
        function getRandom() {
            var allType = '0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f';//16进制颜色
            var allTypeArr = allType.split(',');//通过','分割为数组
            var color = '#';
            for (var i = 0; i < 6; i++) {
                var random = parseInt(Math.random() * allTypeArr.length);
                //随机生成一个0-16的数
                color += allTypeArr[random];
            }
            return color;//返回随机生成的颜色
        }
    </script>
</body>

</html>

到此这篇关于Canvas跟随鼠标炫彩小球的实现的文章就介绍到这了,更多相关Canvas跟随鼠标 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
Javascript 相关文章推荐
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
Mar 03 Javascript
vue通过点击事件读取音频文件的方法
May 30 Javascript
js实现tab栏切换效果
Aug 02 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 Javascript
JS ES6异步解决方案
Apr 29 Javascript
uniapp开发小程序的经验总结
JS新手入门数组处理的实用方法汇总
Apr 07 #Javascript
vue backtop组件的实现完整代码
一文帮你理解PReact10.5.13源码
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
给原生html中添加水印遮罩层的实现示例
html实现随机点名器的示例代码
You might like
php你的验证码安全码?
2007/01/02 PHP
dedecms模板标签代码官方参考
2007/03/17 PHP
php常用表单验证类用法实例
2015/06/18 PHP
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
Dom与浏览器兼容性说明
2010/10/25 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
2013/08/14 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
vue多级多选菜单组件开发
2020/09/08 Javascript
微信小程序 input输入框详解及简单实例
2017/01/10 Javascript
微信小程序侧边栏滑动特效(左右滑动)
2017/01/23 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
2018/12/06 jQuery
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
使用typescript改造koa开发框架的实现
2020/02/04 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
python ip正则式
2009/05/07 Python
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
Python的shutil模块中文件的复制操作函数详解
2016/07/05 Python
ansible作为python模块库使用的方法实例
2017/01/17 Python
Python 实现链表实例代码
2017/04/07 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
python list多级排序知识点总结
2019/10/23 Python
Python使用pymysql模块操作mysql增删改查实例分析
2019/12/19 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
canvas实现二维码和图片合成的示例代码
2018/08/01 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
制冷与电控专业应届生求职信
2013/11/11 职场文书
奥林匹克的口号
2014/06/13 职场文书
关于实现中国梦的心得体会
2016/01/05 职场文书
CSS实现鼠标悬浮动画特效
2023/05/07 HTML / CSS