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 ...

随机推荐

前端框架之争丨除了Vue、Angular和React还有谁与之争锋
转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文参考:https://www.sitepoint.com/most-popular-frontend-f ...
（十二）docker --privileged
1. privileged参数作用 --privileged Give extended privileges to this container 大约在0.6版,privileged被引入docke ...
太全了！Redis主从复制原理以及常见问题总结
相信很多小伙伴都已经配置过主从复制,但是对于redis主从复制的工作流程和常见问题很多都没有深入的了解.这次给大家整理一份redis主从复制的全部知识点. 下方可视频观看,效果更佳 Redis实战精讲 ...
PAT归纳总结——关于二叉树的一些总结
今天是6月26日到下个月的这个时候已经考过试了,为了让自己考一个更高的分数,所以我打算把PAT的相关题型做一个总结.目前想到的方法就是将相关的题型整理到一起然后,针对这种题型整理出一些方法. 二叉树的 ...
Windows 2003 Server远程代码执行漏洞集合
目录 MS08-067 CVE-2017-7269 MS08-067 发布日期:2008/10/22 针对端口:139.445 漏洞等级:高危漏洞影响:服务器服务中的漏洞可能允许远程执行代码受影响 ...
c/c++ 指针数组和数组指针
看这个标题都要晕了,我们不妨把他拆开来理解,比较容易指针数组:对象是一个数组,数组元素的类型是指针指针数组的定义方式: 类型名 *数组名[数组长度]; 如: int *p[8]; 数组指针:对象是 ...
Swift系列一 - 数据类型
如果你习惯了OC的语法,第一次接触Swift的语法可能会有点抗拒,因为Swift的语法有点怪.但如果你有前端的基础,学Swift可能会有点吃力,如果你有C++的基础可能会学得比较快点.不管你有什么样的 ...
双非硕士的辛酸求职回忆录：第 2 篇谈谈我是如何同时找到Java、Python、Go等开发岗和国企银行的科技岗位Offer(上篇)
1. 双非硕士的辛酸求职之旅--谈谈我是如何同时找到Java.Python.Go等开发岗和国企银行的offer 1.1. 秋招最终情况本人情况:双非硕,意向工作城市广深,Java和Python技术栈 ...
Day004 Scanner进阶
Scanner进阶例1 Scanner scanner = new Scanner(System.in); //从键盘接收数据 int i = 0; float f = 0.0f; System.o ...
【opencv】Java+eclipse+opencv 环境搭建 helloword入门demo
文章为博主原创,纯属个人理解,如有错误欢迎指出. 如需转载,请注明出处. 引入jar包引入配置文件到此环境配置完成!!! 可能会出现的问题: 1. jdk版本不一致导致发生异常.如图 build ...