<html>

<head>

    <title></title>

    <meta charset="utf-8" />

    <style type="text/css">

        *

        {

            margin:0;

            padding:0;

        }

        #myCanvas

        {

            background-color:cadetblue;

            overflow:hidden;

        }

    </style>

</head>

<body>

    <canvas id="myCanvas"></canvas>

    <script type="text/javascript">

        var canvasPage3 = document.getElementById("myCanvas");

        canvasPage3.width = 1600;

        canvasPage3.height = 770;

        var ctx = canvasPage3.getContext("2d");

        var zhongX = 800;

        var zhongY = 385;

        function randomNum(x,y)

        {

            return Math.floor(Math.random() * (y - x + 1) + x);

        }

        function randomColor() {

            return "rgb(" + randomNum(0, 255) + "," + randomNum(0, 255) + "," + randomNum(0, 255) + ")";

        }

        function Ball() {

            this.r = randomNum(0.1, 3);

            this.color = "white";

            this.x = randomNum(this.r, canvasPage3.width - this.r);

            this.y = randomNum(this.r, canvasPage3.height - this.r);

            this.speedX = randomNum(1, 3) * (randomNum(0, 1) ? 1 : -1);

            this.speedY = randomNum(1, 3) * (randomNum(0, 1) ? 1 : -1);

        }

        Ball.prototype.move = function () {

            this.x += this.speedX*0.2;

            this.y += this.speedY*0.2;

            if(this.x<=this.r)

            {

                this.x = this.r;

                this.speedX *= -1;

            }

            if(this.x>=canvasPage3.width -this.r)

            {

                this.x = canvasPage3.width - this.r

                this.speedX *= -1;

            }

            //小球碰到上边界的处理 反弹

            if (this.y <= this.r) {

                this.y = this.r;

                //反弹

                this.speedY *= -1;

            }

            //小球碰到下边界的处理 反弹

            if (this.y >= canvasPage3.height - this.r) {

                this.y = canvasPage3.height - this.r;

                //反弹

                this.speedY *= -1;

            }

        }

        Ball.prototype.draw = function () {

            ctx.beginPath();

            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);

            ctx.fillStyle = this.color;

            ctx.fill();

        }

        var balls = [];

        var arr = [];

        for (var i = 0; i < 0.0002 * canvasPage3.width * canvasPage3.height; i++) {

            var ball = new Ball();

            balls.push(ball);

        }

        setInterval(function () {

            arr = [];

            ctx.clearRect(0, 0, canvasPage3.width, canvasPage3.height);

            for (var i = 0; i < balls.length; i++) {

                balls[i].move();

                balls[i].draw();

                if (ballAndMouse(balls[i]) < 130) {

                    ctx.lineWidth = (130 - ballAndMouse(balls[i])) * 1.5 / 130;

                    ctx.beginPath();

                    ctx.moveTo(balls[i].x, balls[i].y);

                    ctx.lineTo(zhongX, zhongY);

                    ctx.strokeStyle = balls[i].color;

                    ctx.stroke();

                }

            }

            for (var i = 0; i < balls.length; i++) {

                for (var j = 0; j < balls.length; j++) {

                    if (ballAndBall(balls[i], balls[j]) < 80) {

                        ctx.lineWidth = (80 - ballAndBall(balls[i], balls[j])) * 0.6 / 80;

                        ctx.globalAlpha = (130 - ballAndBall(balls[i], balls[j])) * 1 / 80;

                        ctx.beginPath();

                        ctx.moveTo(balls[i].x, balls[i].y);

                        ctx.lineTo(balls[j].x, balls[j].y);

                        ctx.strokeStyle = balls[i].color;

                        ctx.stroke();

                    }

                }

            }

            ctx.globalAlpha = 1.0;

        }, 30);

        canvasPage3.onmousemove = function (event) {

            event = event || window.event;

            zhongX = event.offsetX;

            zhongY = event.offsetY;

        }

        function ballAndMouse(obj) {

            var disX = Math.abs(zhongX - obj.x);

            var disY = Math.abs(zhongY - obj.y);

            return Math.sqrt(disX * disX + disY * disY);

        }

        function ballAndBall(obj1, obj2) {

            var disX = Math.abs(obj1.x - obj2.x);

            var disY = Math.abs(obj1.y - obj2.y);

            return Math.sqrt(disX * disX + disY * disY);

        }

    </script>

</body>

</html>

html5粒子连线的更多相关文章

  1. 简直要逆天！超炫的 HTML5 粒子效果进度条

    我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loading 效果,即使让我多等一会也无妨:)你呢 ...

  2. 7款让人惊叹的HTML5粒子动画特效(转载)

    1.HTML5 Canvas粒子模拟效果 这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案, ...

  3. 7款让人惊叹的HTML5粒子动画特效

    HTML5的很大一个优势就是可以更加便捷高效地制作网页粒子动画特效,特别是Canvas特性,可以实现在网页上绘制任何图形和动画.本文要分享7款让人惊叹的HTML5粒子动画特效,这些粒子特效都提供源代码 ...

  4. 超炫的HTML5粒子效果进度条 VS 如何规范而优雅地code

    最近瞎逛的时候发现了一个超炫的粒子进度效果,有多炫呢?请擦亮眼镜!   // _this.ch){ _this.particles.splice(i, 1); } }; this.Particle.p ...

  5. 一步一步HTML5粒子编辑器

    写在前面 大家阅读此文之前,可以先看一篇MiloYip的文章:用JavaScript玩转游戏物理(一)运动学模拟与粒子系统,看完之后再看此文,更加容易理解. MiloYip使用的粒子是canvas中绘 ...

  6. HTML5画：线、圆、矩形、渐变

    示例一:矩形 <!DOCTYPE html><head> <meta charset=utf-8> <title>HTML5画线.圆.矩形</ti ...

  7. vue-particles做背景，鼠标动画粒子连线填坑(按钮没有点击响应)

    为了提高页面展示效果,登录界面内容比较单一的,粒子效果作为背景经常使用到,vue工程中利用vue-particles可以很简单的实现页面的粒子背景效果. 解决问题: 以背景方式显示 无法获取按钮焦点, ...

  8. 精选9个值得学习的 HTML5 效果【附源码】

    这里精选了一组很酷的 HTML5 效果.HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强.效 ...

  9. 让你心动的 HTML5 & CSS3 效果【附源码下载】

    这里集合的这组 HTML5 & CSS3 效果,有的是网站开发中常用的.实用的功能,有的是先进的 Web 技术的应用演示.不管哪一种,这些案例中的技术都值得我们去探究和学习. 超炫的 HTML ...

随机推荐

  1. arcgis二次开发遇到System.Runtime.InteropServices.COMException (0x80040228) ：异常来自HRESULT:0x80040228

    出现此问题只需要在控件上拖入一个LicenseControl就可以了 参考资料:http://yaogu.blog.163.com/blog/static/1849990662012101283256 ...

  2. utf-8 utf8

    mysql> DROP TABLE IF EXISTS student; Query OK, 0 rows affected (0.00 sec) mysql> create table ...

  3. 2016年蓝桥杯省赛A组c++第2题(暴力求解)

    /* 某君从某年开始每年都举办一次生日party,并且每次都要吹熄与年龄相同根数的蜡烛. 现在算起来,他一共吹熄了236根蜡烛. 请问,他从多少岁开始过生日party的? 请填写他开始过生日party ...

  4. inet_addr()和inet_ntoa()使用注意

    inet_addr():无法处理255.255.255.255,认为该ip为非法,返回-1 inet_ntoa():转换后地址存储在静态变量中,连续两次调用,第二次会覆盖第一次的值. 建议使用inet ...

  5. 关于安装SVN Service 出错 Service 'VisualSVN Server' failed to start. Please check VisualSVN Server log in Event Viewer for more details

    关于安装SVN Service 出错 Service 'VisualSVN Server' failed to start. Please check VisualSVN Server log in ...

  6. 报错解决——linux下执行sh出现异常"syntax error: unexpected end of file"

    有时我们在linux下执行一个sh文件,会报错“SYNTAX ERROR:UNEXPECTED END OF FILE”,这个现象主要是工作的系统环境改变造成的. 若最初脚本中是在windows下,使 ...

  7. Linux系统上传文件与下载文件命令

    我们用的服务器都是Linux系统的,如果用的是远程服务器,就需要将我们的代码推送过去,这里可以用到PSCP命令. (一)上传 pscp 本机文件的路径以及文件名 远程主机的用户名@远程主机IP:想要存 ...

  8. MySQL 5.7 Replication 相关新功能说明 （转）

    背景: MySQL5.7在主从复制上面相对之前版本多了一些新特性,包括多源复制.基于组提交的并行复制.在线修改Replication Filter.GTID增强.半同步复制增强等.因为都是和复制相关, ...

  9. 向数据库中添加数据，通过se16 不能添加，通过 代码可以添加的原因

    1:  在向数据库中添加数据时,通过客户端se16 准备对 数据表进行添加数据,提示如下: 找了以下原因,如下: https://www.baidu.com/link?url=3yRtAfY1_9XG ...

  10. HBase 数据迁移方案介绍 (转载)

    原文地址:https://www.cnblogs.com/ballwql/p/hbase_data_transfer.html 一.前言 HBase数据迁移是很常见的操作,目前业界主要的迁移方式主要分 ...