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跟随鼠标炫彩小球的更多相关文章

[js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球
综合利用前面所学,实现一个绚丽的小球动画,这个实例用到的知识点,在我的博客全部都有,可以去这里查看所有的canvas教程 <head> <meta charset='utf-8' / ...
超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等
超多经典 canvas 实例普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...
html5跟随鼠标炫酷网站引导页动画特效
html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...
HTML5 canvas画布写炫彩动态的倒计时效果
html代码如下,插入了2个js代码. <!DOCTYPE html> <html> <head> <title>canvas</title> ...
面向对象原生JavaScript案例炫彩小球
面向对象其实对于初学者来说还是比较难以理解的,以前看到一个面试题目面向对象是什么? 面向对象是一种思想,千万别入坑了: 这次给大家带来的是一个鼠标移动产生小球的案例,不是我不想给大家分享如何去认识面 ...
java-js知识库之二——canvas绘制炫彩气泡
现在使用canvas绘制气泡,虽说很多人都已经实现过了,可能方法都大同小异,但自己写和看别人写完全是两码事,自己会写的才是自己的,话不多说,直接上代码. 先来一张效果图: 现在上代码,代码有详细的注释 ...
JS打造的跟随鼠标移动的酷炫拓扑图案
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
canvas实现跟随鼠标旋转的箭头
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...

随机推荐

kubernetes集群EFK日志系统搭建
日志收集架构 Kubernetes 集群本身不提供日志收集的解决方案,一般来说有主要的3种方案来做日志收集: 在节点上运行一个 agent 来收集日志在 Pod 中包含一个 sidecar 容器来收 ...
解决mysql You can't specify target table for update in FROM clause错误
mysql中You can't specify target table for update in FROM clause错误的意思是说,不能先select出同一表中的某些值,再update这个表( ...
hdu1572 水搜索
题意: 中文的不解释; 思路: 其实就是一个水的搜索,直接搜索不会超时,还有别跑最短路了,题目没要求跑最短路,别读错题,刚开始自己嘚嗖的跑了一边最短路 wa了 ,正好最近看了STL ...
UVA10340子序列
题意: 给你两个串,问你第二个第一个串是否是第一个串删除0个或多个字母得到的? 思路: 直接模拟就行了,在第二个串中去按顺序更新第一个串的下标,好像没说明白啊,不管了,水题,不 ...
CVE-2011-0104：Microsoft Office Excel 中的栈溢出漏洞调试分析
0x01 前言 CVE-2011-0104 是 Microsoft Office 中的 Excel(没有打补丁的情况下)表格程序在处理 TOOLBARDEF 中的 Record 字节时没有对 Len ...
Redis内存——内存消耗(内存都去哪了？)
最新:Redis内存--三个重要的缓冲区最新:Redis内存--内存消耗(内存都去哪了?) 最新:Redis持久化--如何选择合适的持久化方式最新:Redis持久化--AOF日志更多文章... ...
Mac OSX系统homebrew update Fetching failed问题解决方案
1. brew update error (i) 问题出现及现象描述昨天换了台电脑,有些软件需要重新安装或更新一下,遇到了下面的问题 cv@xys-MacBook-Pro ~ % brew upda ...
【大白话 mysql】mysql 事务与日志原理
在后端面试中,mysql是比不可少的一环,其中对事务和日志的考察更是"重灾区", 大部分同学可能都知道mysql通过redolog.binlog和undolog保证了sql的事务性 ...
解密华为云FusionInsight MRS新特性：一架构三湖
摘要:华为云安全网关产品总监郭冕在"华为云TechWave云原生2.0专题日"上发表<华为云FusionInsight MRS,一个架构实现三种数据湖>的主题演讲,分享 ...
node.js的包加载机制
加载一个模块 require('moduleName'); 现在核心模块中加载,如果核心模块中没有,那么就去node_modules目录下去找,核心模块的优先级最高. 如果加载模块式省略了文件的后缀名 ...