<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style type="text/css">

        * {

            padding: 0;

            margin: 0;

        }

        #myCanvas {

            background-color: black;

        }

    </style>

</head>

<body>

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

    <script type="text/javascript">

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

        width = document.documentElement.clientWidth;

        height = document.documentElement.clientHeight;

        myCanvas.width = width;

        myCanvas.height = height;

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

        ctx.fillStyle = "white";

        ctx.strokeStyle = "rgba(255, 255, 255, .3)";

        function Star(ctx, x, y, r){

            this.ctx = ctx;

            this.x = x;

            this.y = y;

            this.r = r;

            this.x_speed = (parseInt(Math.random() * 3) + 1) * Math.pow(-1, parseInt(Math.random() * 10) + 1) / 5;

            this.y_speed = (parseInt(Math.random() * 3) + 1) * Math.pow(-1, parseInt(Math.random() * 10) + 1) / 5;

        }

        Star.prototype.render = function(){

            this.ctx.beginPath();

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

            this.ctx.closePath();

            this.ctx.fill();

        }

        Star.prototype.move = function(){

            this.x -= this.x_speed;

            this.y -= this.y_speed;

        }

        Star.prototype.changeX = function(){

            this.x_speed = -this.x_speed;

        }

        Star.prototype.changeY = function(){

            this.y_speed = -this.y_speed;

        }

        var mouse_star = new Star(ctx, 0, 0, 1);

        var arr = [];

        document.onmousemove = function(e){

            mouse_star.x = e.clientX;

            mouse_star.y = e.clientY;

        }

        document.onclick = function(e){

            for (var i = 0; i < 5; i++) {

                arr.push(new Star(ctx, e.clientX, e.clientY, 1));

            };

            setTimeout(function(){

                for (var i = 0; i < 5; i++) {

                    arr.pop();

                };

            },3000)

        }

        for (var i = 0; i < 100; i++) {

                arr.push(new Star(ctx, Math.random() * width, Math.random() * height, 1));

        };

        setInterval(function(){

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

            mouse_star.render();

            arr.forEach(function(value, index){

                value.move();

                if (value.x < 0 || value.x > width ) {

                    value.changeX();

                };

                if (value.y < 0 || value.y > height) {

                    value.changeY();

                };

                value.render();

            });

            arr.forEach(function(value, index){

                for (var i = index; i < arr.length; i++){

                    if (Math.abs(value.x-arr[i].x) < 50 && Math.abs(value.y - arr[i].y) < 50 ) {

                        line(value.x, value.y, arr[i].x, arr[i].y);

                    };

                }

                if(Math.abs(value.x - mouse_star.x) < 150 && Math.abs(value.y - mouse_star.y) < 150) {

                    line(value.x, value.y, mouse_star.x, mouse_star.y);

                }

            })

        }, 20);

　　　

        function line(x1, y1, x2, y2) {

            ctx.beginPath();

            ctx.moveTo(x1, y1);

            ctx.lineTo(x2, y2);

            ctx.closePath();

            ctx.stroke();

        }

    </script>

</body>

</html>

canvas连线特效的更多相关文章

  1. canvas之背景特效

    需具备js基础知识以及canvas相关方法(可查阅相关文档) 下面是一篇有关js与canvas的背景特效 基于面向过程的思维 <!DOCTYPE html> <html> &l ...

  2. HTML5 canvas生成图片马赛克特效插件

    HTML5 canvas生成图片马赛克特效插件 简要教程 这是一款使用html5 canvas来将图片制作成马赛克效果的js插件.该插件的灵感来自于美国肖像画家Chuck Close.已经有人使用这个 ...

  3. Canvas与javaScript特效笔记

    第六章   Canvas与javaScript特效笔记 q  <canvas>标签的用途 HTML5 canvas 提供了通过 JavaScript 绘制图形的方法,此方法使用简单但功能强 ...

  4. 兼容IE浏览器的canvas画线和圆圈

    1.新建test.html文件,代码如下: <!DOCTYPE html><html><head>    <meta charset="utf-8& ...

  5. CANVAS模仿龙卷风特效

    大学时候,有一段时间对flash比较感兴趣.去图书馆借了一本很厚很厚的falsh书籍. 翻了几页之后,就再没有往后看过.印象比较深的是作者说他用flash完成了一个龙卷风效果. 一直到现在我也没有看到 ...

  6. canvas 画线

    一.canvas是基于状态的绘图环境 1.canvas是基于状态的绘制 context.moveTo(100,100); context.lineTo(700,700); context.lineWi ...

  7. 结合canvas做雨滴特效

    雨滴特效 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  8. canvas绘制线和矩形

    ###canvas绘制矩形 HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径 1.绘制矩形 canvas提供了三种方法绘制矩形: ----> ...

  9. canvas星空背景特效+CSS旋转相册学习

    今天在看帖子的时候,看到了个有趣的css旋转相册,刚好之前做了一个星空背景dome,这里给大家分享下代码: 旋转相册参考:https://blog.csdn.net/gitchatxiaomi/art ...

随机推荐

  1. Vue框架创建项目常遇到问题

    利用npm安装cnpm时出现的错误 npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least ...

  2. 使用AD画PCB的技能总结（纯属个人笔记，请大神多多指导）

    在参加2017全国电子设计大赛的过程中,我将平时学到的点点滴滴记录下来,作为曾经的回忆吧!(未完待续) ------------------------------------------------ ...

  3. 谷歌将一些弱小的库从安卓代码移除Google Removes Vulnerable Library from Android

    Google this week released the November 2018 set of security patches for its Android platform, which ...

  4. #WEB安全基础 : HTTP协议 | 0x10 扩展HTTP报文结构概念和内容编码

    #以后的知识都是HTTP协议的扩展,如果精力有限可以选择暂时忽略,注意只是暂时忽略,以后的东西同样重要 HTTP传输数据时可以直接传输也可以对数据进行编码,由于编码在计算机内运行,所以会占用一些CPU ...

  5. [Android] 对于com.google.gson.JsonElement的转义问题

    不多说了,com.google.gson.JsonElement使用的时候,toString()跟getAsString()这两个方法对于特殊字符的转义是不同的, 看这里的解释: https://st ...

  6. GO语言的包

    包介绍 包(package)是多个Go源码的集合,go语言有很多内置包,比如fmt,os,io等. 定义包 main包是一个可执行的包,只应用程序的入口包,编译完会生成一个可执行文件. 包名可以不和文 ...

  7. CSS——img自适应div大小

    代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  8. java数组集合元素的查找

    java数组和集合的元素查找类似,下面以集合为例. 数组集合元素查找分为两类: 基本查找: 二分折半查找: 基本查找: 两种方式都是for循环来判断,一种通过索引值来判断,一种通过数组索引判断. 索引 ...

  9. war包安装jenkins

    转自:https://blog.51cto.com/bigboss/2129358 系统环境: CentOS 7.5 1804 IP:192.168.1.3 关闭selinux.firewalld j ...

  10. 第十七节 Cookie基础与应用

    什么是cookie:其实就是页面用来保存信息:比如,自动登录.记住用户名 cookie的特性:(以域名为单位的) 同一个网站(同一个域名)中所有页面共享一套cookie 数量.大小有限,跟浏览器有关, ...