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 Ajax 跨域访问的解决方案
Mar 12 Javascript
为JavaScript添加重载函数的辅助方法
Jul 04 Javascript
ExtJS中设置下拉列表框不可编辑的方法
May 07 Javascript
node.js入门教程
Jun 01 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
Javascript复制实例详解
Jan 28 Javascript
微信公众号支付H5调用支付解析
Nov 04 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
ES6中数组array新增方法实例总结
Nov 07 Javascript
从0到1搭建element后台框架优化篇(打包优化)
May 12 Javascript
uniapp开发小程序的经验总结
JS新手入门数组处理的实用方法汇总
Apr 07 #Javascript
vue backtop组件的实现完整代码
一文帮你理解PReact10.5.13源码
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
给原生html中添加水印遮罩层的实现示例
html实现随机点名器的示例代码
You might like
php json_encode值中大括号与花括号区别
2013/09/30 PHP
无需数据库在线投票调查php代码
2016/07/20 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
页面刷新时记住滚动条的位置jquery代码
2014/06/17 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
详解JavaScript中的自定义事件编写
2016/05/10 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
2016/08/10 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
2017/03/30 Javascript
使用JS动态显示文本
2017/09/09 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
Js跳出两级循环方法代码实例
2020/09/22 Javascript
[40:12]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
一个简单的python程序实例(通讯录)
2013/11/29 Python
在Python程序中操作MySQL的基本方法
2015/07/29 Python
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
tensorflow常用函数API介绍
2020/04/19 Python
Python实现动态循环输出文字功能
2020/05/07 Python
HTML5 CSS3给网站设计带来出色效果
2009/07/16 HTML / CSS
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
Skechers越南官方网站:来自美国的运动休闲品牌
2021/02/22 全球购物
共产党员公开承诺书范文
2014/03/28 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
Redis 中使用 list,streams,pub/sub 几种方式实现消息队列的问题
2022/03/16 Redis