<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. LeetCode 832 Flipping an Image 解题报告

    题目要求 Given a binary matrix A, we want to flip the image horizontally, then invert it, and return the ...

  2. python中dict的fromkeys用法

    fromkeys是创造一个新的字典.就是事先造好一个空字典和一个列表,fromkeys会接收两个参数,第一个参数为从外部传入的可迭代对象,会将循环取出元素作为字典的key值,另外一个参数是字典的val ...

  3. MySQL+InnoDB semi-consitent read原理及实现分析（转）

    add by zhj: 主要讲的是在MySQL在Repeatable Read和Read Committed级别下,加锁时的不同,在Read Committed隔离级别下,只对where 中满足条件的 ...

  4. python server

    #!/usr/bin/env python #coding=utf-8 # modifyDate: 20120808 ~ 20120810 # 原作者为:bones7456, http://li2z. ...

  5. zip压缩类

    using System; using System.Collections.Generic; using System.Text; using System.Text.RegularExpressi ...

  6. MongoDB 用户管理

    创建管理员账户: 1.登录 [root@MongoDB ~]# mongo 2.切换到admin数据库创建账户 > use admin switched to db admin 3.用户创建用户 ...

  7. CGPoint,CGSize,CGRect转NSString以及CGRect的一些便捷实用方法

    打印代码小技巧 UIKIT_EXTERN NSString *NSStringFromCGPoint(CGPoint point); UIKIT_EXTERN NSString *NSStringFr ...

  8. SQL 流水账余额查询

    创建表 CREATE TABLE [dbo].[test]( ,) NOT NULL, [RQ] [date] NULL, [SR] [int] NULL, [ZC] [int] NULL ) ON ...

  9. 基于nodejs的 本地文件夹http服务器：http-server

    请记住,是文件夹服务器 $ npm install http-server -g $ cd /tmp && http-server 或: $ http-server /tmp

  10. Centos7限速和测速

    限速 wondershaper是国外人开发的一款在Linux内核下基于TC工具的对整块网卡的限度工具. 第一种安装方法 首先下载wondershaper的rpm安装包:wondershaper-1.1 ...