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

    小结: 1. 销量 广告 微分方程 动态系统 市场份额 https://en.wikipedia.org/wiki/Sethi_model The Sethi model was developed ...

  2. 创建结点 与 分配内存 Function to create a Node. Allocates memory for a new node. 主动申请内存 链表 指针的写法

    Self Referential Data Structure in C - create a singly linked list http://www.how2lab.com/programmin ...

  3. I do think I can breakdown the problem into parts that make sense

    RESTful Web APIs_2013 An API released today will be named after the company that hosts it. We talk a ...

  4. dp 单调性优化总结

    对于单调性优化其实更多的是观察dp的状态转移式子的单调性 进而用优先队列 单调队列 二分查找什么的找到最优决策 使时间更优. 对于这道题就是单调性优化的很好的例子 首先打一个暴力再说. f[i][j] ...

  5. python全栈开发day12

    列表 创建列表: 基本操作: 索引 切片 追加 删除 长度 切片 循环 包含 #######################列表list类中提供的方法######################## ...

  6. vue获取地址栏传过来的参数VS原生js获取地址栏的参数

    Vue的方式 Vue的 query方式 ①this.$route.query.companyId ( companyId 为参数的名称 是$route 不是 $router) Vue的 params方 ...

  7. 坦克大战java版

    吃了可以加血的血块类 import java.awt.*; public class Blood { //血块移动的路径 int[][] pos = { {450,250},{450,252},{45 ...

  8. sqlserver配置允许快照隔离

    ALTER DATABASE TustenaOS SET ALLOW_SNAPSHOT_ISOLATION ON

  9. 什么是Docker？（一）

    Docker 最初是 dotCloud 公司创始人 Solomon Hykes 在法国期间发起的一个公司内部项目,它是基于 dotCloud 公司多年云服务技术的一次革新,并于 2013 年 3 月以 ...

  10. （1.10）SQL优化——mysql 常见SQL优化

    (1.10)常用SQL优化 insert优化.order by 优化 1.insert 优化 2.order by 优化 [2.1]mysql排序方式: (1)索引扫描排序:通过有序索引扫描直接返回有 ...