<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. [knowledge][linux][sysfs] sysfs文件系统

    https://en.wikipedia.org/wiki/Sysfs http://man7.org/linux/man-pages/man5/sysfs.5.html https://www.ke ...

  2. [math][mathematica] archlinux 下 mathematica 的安装 (科学计算软件 mathematica/matlab/sagemath)

    ONLINE: http://www.wolframalpha.com/ GPL: segamath: http://www.sagemath.org/ famous and not free: ma ...

  3. cruise-control

    https://github.com/linkedin/cruise-control https://engineering.linkedin.com/blog/2017/08/open-sourci ...

  4. 转:jquery的$(function(){})和$(document).ready(function(){}) 的区别

    原文链接:https://www.cnblogs.com/slyzly/articles/7809935.html [转载]jquery的$(function(){})和$(document).rea ...

  5. 使用Python + Selenium破解滑块验证码

    在前面一篇博客<使用 Python + Selenium 打造浏览器爬虫>中,我介绍了 Selenium 的基本用法和爬虫开发过程中经常使用的一些小技巧,利用这些写出一个浏览器爬虫已经完全 ...

  6. linux关闭的时候出现异常： java.net.ConnectException: 拒绝连接 (Connection refused)

    这个时候: 需要先把java进程杀死. 然后再重新启动. 杀死进程: ps -aux | grep java 然后kill -9 进程 然后再重新启动.

  7. UOJ244 短路 贪心

    正解:贪心 解题报告: 传送门! 贪心真的都是些神仙题,,,以我的脑子可能是不存在自己想出解这种事情了QAQ 然后直接港这道题解法趴,,, 首先因为这个是对称的,所以显然的是可以画一条斜右上的对角线, ...

  8. python中的list以及list与array相互转换

    python中的list是一种有序集合,可以随时增删元素: # -*- coding: utf-8 -*- frameID = 1 frameID_list = [] frameID_list.app ...

  9. zabbix agentd安装

    一.Linux客户端1.创建zabbix用户 groupadd zabbix useradd -g zabbix -M -s /sbin/nologin zabbix 2.解压agent包 zabbi ...

  10. Servlet----------在使用doGet()和doPost()是如何处理中文乱码

    如果在登录界面跳转到时servlet中使用doGet()方法显示中文出现乱码时,可以添加这两行代码来解决,但这不是唯一的方法 request.setCharacterEncoding("GB ...