<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. 托布利兹变换 toeplitz 变换

    托布利兹变换 toeplitz 变换 算术平均变换 '''An->C=>(A1+A2+A3+...+An)/n->C,K_ni=1/n=>+[AiK_ni->C (Yn- ...

  2. data-original

    <img class="lazy" style="display: inline;" alt="开光纯铜牛摆件" src=" ...

  3. Dom4j与sax 简单对比

    Dom4j与sax之间的对比 dom4j不适合大文件的解析,因为它是一下子将文件加载到内存中,所以有可能出现内存溢出,sax是基于事件来对xml进行解析的,所以他可以解析大文件的xml,也正是因为如此 ...

  4. 《mongoDB》查询

    一:简单查询 db.collection.find(query, projection) - query :可选,使用查询操作符指定查询条件 - projection :可选,使用投影操作符指定返回的 ...

  5. oracle中索引快速全扫描和索引全扫描的区别

    当进行index full scan的时候 oracle定位到索引的root block,然后到branch block(如果有的话),再定位到第一个leaf block, 然后根据leaf bloc ...

  6. ubuntu上第一个hello程序

    1.终端中输入gedit  hello.c ,然后输入程序: 2.使用gcc编译器,编译出在PC上运行的hello可执行程序:gcc  ./hello.c  -o   hello-pc; 3.使用ar ...

  7. 帝国cms文章页调用当前文章URL如何操作?

    前面我们讨论过dedecms文章页调用地址(当前文章URL)如何操作,作为同台竞技的帝国cms也能在文章页调用当前文章URL吗?答案是肯定的!那就随ytkah一起来探索一下吧 帝国cms模板是在后台直 ...

  8. WINDOWS SERVER 2008 R2安装指南

    说明:适用于以下几种操作系统: 1.Windows Server 2008 Standard Endition R2 2.Windows Server 2008 Enterprise Endition ...

  9. .NET 三层框架

    1.三层架构 三层架构(3-tier architecture) 通常意义上的三层架构就是将整个业务应用划分为:表现层(Presentation layer).业务逻辑层(Business Logic ...

  10. K-means &K-medoids 聚类

    k-平均值算法对孤立点很敏感!因为具有特别大的值的对象可能显著地影响数据的分布. k-中心点(k-Medoids): 不采用簇中对象的平均值作为参照点, 而是选用簇中位置最中心的对象, 即中心点(me ...