// canvas_width || r.x canvas_height || r.y = e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速
d = (e.max - dist) / e.max,
context.beginPath(),
context.lineWidth = d / 2,
context.strokeStyle = "rgba(" + config.c + "," + (d + 0.2) + ")",
context.moveTo(r.x, r.y),
context.lineTo(e.x, e.y),
context.stroke());
}
}
}), frame_func(draw_canvas);
}
//创建画布,并添加到body中
var the_canvas = document.createElement("canvas"), //画布
config = get_config_option(), //配置
canvas_id = "c_n" + config.l, //canvas id
context = the_canvas.getContext("2d"), canvas_width, canvas_height,
frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(func) {
window.setTimeout(func, 1000 / 45);
}, random = Math.random,
current_point = {
x: null, //当前鼠标x
y: null, //当前鼠标y
max: 20000 // 圈半径的平方
},
all_array;
the_canvas.id = canvas_id;
the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
get_by_tagname("body")[0].appendChild(the_canvas);

//初始化画布大小
set_canvas_size();
window.onresize = set_canvas_size;
//当时鼠标位置存储,离开的时候,释放当前位置信息
window.onmousemove = function(e) {
e = e || window.event;
current_point.x = e.clientX;
current_point.y = e.clientY;
}, window.onmouseout = function() {
current_point.x = null;
current_point.y = null;
};
//随机生成config.n条线位置信息
for (var random_points = [], i = 0; config.n > i; i++) {
var x = random() * canvas_width, //随机位置
y = random() * canvas_height,
xa = 2 * random() - 1, //随机运动方向
ya = 2 * random() - 1;
// 随机点
random_points.push({
x: x,
y: y,
xa: xa,
ya: ya,
max: 6000 //沾附距离
});
}
all_array = random_points.concat([current_point]);
//0.1秒后绘制
setTimeout(function() {
draw_canvas();
}, 100);
}();
// ]]>

canvas-nest.js 这个js文件可以用来实现炫酷的线条与鼠标进行交互的功能,具体效果如图所示

js具体源码如下:

/**
     * Copyright (c) 2016 hustcc
     * License: MIT
     * Version: %%GULP_INJECT_VERSION%%
     * GitHub: https://github.com/hustcc/canvas-nest.js
    **/
    ! function() {
      //封装方法,压缩之后减少文件大小
      function get_attribute(node, attr, default_value) {
        return node.getAttribute(attr) || default_value;
      }
      //封装方法,压缩之后减少文件大小
      function get_by_tagname(name) {
        return document.getElementsByTagName(name);
      }
      //获取配置参数
      function get_config_option() {
        var scripts = get_by_tagname("script"),
          script_len = scripts.length,
          script = scripts[script_len - 1]; //当前加载的script
        return {
          l: script_len, //长度,用于生成id用
          z: get_attribute(script, "zIndex", -1), //z-index
          o: get_attribute(script, "opacity", 0.5), //opacity
          c: get_attribute(script, "color", "0,0,0"), //color
          n: get_attribute(script, "count", 99) //count
        };
      }
      //设置canvas的高宽
      function set_canvas_size() {
        canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      }

      //绘制过程
      function draw_canvas() {
        context.clearRect(0, 0, canvas_width, canvas_height);
        //随机的线条和当前位置联合数组
        var e, i, d, x_dist, y_dist, dist; //临时节点
        //遍历处理每一个点
        random_points.forEach(function(r, idx) {
          r.x += r.xa,
          r.y += r.ya, //移动
          r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1,
          r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界,反向反弹
          context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点
          //从下一个点开始
          for (i = idx + 1; i < all_array.length; i++) {
            e = all_array[i];
            // 当前点存在
            if (null !== e.x && null !== e.y) {
              x_dist = r.x - e.x; //x轴距离 l
              y_dist = r.y - e.y; //y轴距离 n
              dist = x_dist * x_dist + y_dist * y_dist; //总距离, m

              dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速
                d = (e.max - dist) / e.max,
                context.beginPath(),
                context.lineWidth = d / 2,
                context.strokeStyle = "rgba(" + config.c + "," + (d + 0.2) + ")",
                context.moveTo(r.x, r.y),
                context.lineTo(e.x, e.y),
                context.stroke());
            }
          }
        }), frame_func(draw_canvas);
      }
      //创建画布,并添加到body中
      var the_canvas = document.createElement("canvas"), //画布
        config = get_config_option(), //配置
        canvas_id = "c_n" + config.l, //canvas id
        context = the_canvas.getContext("2d"), canvas_width, canvas_height,
        frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(func) {
          window.setTimeout(func, 1000 / 45);
        }, random = Math.random,
        current_point = {
          x: null, //当前鼠标x
          y: null, //当前鼠标y
          max: 20000 // 圈半径的平方
        },
        all_array;
      the_canvas.id = canvas_id;
      the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
      get_by_tagname("body")[0].appendChild(the_canvas);

      //初始化画布大小
      set_canvas_size();
      window.onresize = set_canvas_size;
      //当时鼠标位置存储,离开的时候,释放当前位置信息
      window.onmousemove = function(e) {
        e = e || window.event;
        current_point.x = e.clientX;
        current_point.y = e.clientY;
      }, window.onmouseout = function() {
        current_point.x = null;
        current_point.y = null;
      };
      //随机生成config.n条线位置信息
      for (var random_points = [], i = 0; config.n > i; i++) {
        var x = random() * canvas_width, //随机位置
          y = random() * canvas_height,
          xa = 2 * random() - 1, //随机运动方向
          ya = 2 * random() - 1;
        // 随机点
        random_points.push({
          x: x,
          y: y,
          xa: xa,
          ya: ya,
          max: 6000 //沾附距离
        });
      }
      all_array = random_points.concat([current_point]);
      //0.1秒后绘制
      setTimeout(function() {
        draw_canvas();
      }, 100);
    }();

在html网页中body的标签中添加script标签,如下所示

<script type="text/javascript" color="208,55,66" opacity="0.5"count="99"src="test.js"></script>

color 颜色自定义,opactity 是透明度,一般来说0.5-1就可以了,count的是数量,不要太大,太大可能会使得用户的浏览器卡顿,src后为该js文件的所在路径。

PS:

我直接用test命令了那个js文件

html canvas-nest.js 源码的更多相关文章

  1. Swing实现canvas-nest.js 源码

    #### 说明 canvas-nest.js 源码 http://www.bubuko.com/infodetail-2237716.html 地址:https://gitee.com/dgwcode ...

  2. underscore.js 源码

    underscore.js 源码 underscore]JavaScript 中如何判断两个元素是否 "相同" Why underscore 最近开始看 underscore.js ...

  3. MVVM大比拼之avalon.js源码精析

    简介 avalon是国内 司徒正美 写的MVVM框架,相比同类框架它的特点是: 使用 observe 模式,性能高. 将原始对象用object.defineProperty重写,不需要用户像用knoc ...

  4. 深入理解unslider.js源码

    最近用到了一个挺好用的幻灯片插件,叫做unslider.js,就想看看怎么实现幻灯片功能,就看看源码,顺便自己也学习学习.看完之后收获很多,这里和大家分享一下. unslider.js 源码和使用教程 ...

  5. Jquery.cookie.js 源码和使用方法

    jquery.cookie.js源码和使用方法 jQuery操作cookie的插件,大概的使用方法如下 $.cookie(‘the_cookie’); //读取Cookie值$.cookie(’the ...

  6. MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法

    返回目录 说在前 有时,我们在使用一个插件时,在网上即找不到它的相关API,这时,我们会很抓狂的,与其抓狂,还不如踏下心来,分析一下它的源码,事实上,对于JS这种开发语言来说,它开发的插件的使用方法都 ...

  7. basket.js 源码分析

    basket.js 源码分析 一.前言 basket.js 可以用来加载js脚本并且保存到 LocalStorage 上,使我们可以更加精准地控制缓存,即使是在 http 缓存过期之后也可以使用.因此 ...

  8. 国籍控件(js源码)

    国籍控件(js源码) 一直苦于没有好的国籍控件可以用,于是抽空写了一个国籍控件,现分享给大家. 主要功能和界面介绍 国籍控件主要支持中文.英文过滤以及键盘上下事件. 源码介绍 国籍控件核心是两个文件, ...

  9. vue.js源码精析

    MVVM大比拼之vue.js源码精析 VUE 源码分析 简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多 ...

  10. 从template到DOM(Vue.js源码角度看内部运行机制)

    写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...

随机推荐

  1. JavaScript中闭包实现的私有属性的getter()和setter()方法

    注意: 以下的输出都在浏览器的控制台中 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  2. 用户代理字符串(navigator.userAgent)检测方法

    最近在看<JavaScript 高级程序设计(第三版)>,发现其中关于用户代理字符串检测技术的一些方法,觉得讲的很详细.用户代理字符串(navigator.userAgent)中包含了大量 ...

  3. 面向对象15.3String类-常见功能-获取-2

    public class String_APImethod {/* * 1.4获取字符串中的一部分字符串,也叫字符串 * String substring(int beginIndex, int en ...

  4. java 一款可以与ssm框架完美整合的web报表控件

    硕正套件运行于客户端(浏览器),与应用服务器(Application Server)技术无关,所以能完全用于J2EE. ASP.Net.php等技术开发的Web应用产品中. 硕正套件部署于服务器,支持 ...

  5. 奔跑在Docker上的Spark

    转自:马踏飞燕--奔跑在Docker上的Spark 目录 为什么要在Docker上搭建Spark集群 网络拓扑 Docker安装及配置 ssh安装及配置 基础环境安装 Zookeeper安装及配置 H ...

  6. Java网络连接之HttpURLConnection、HttpsURLConnection

    工具类包含两个方法: http请求.https请求 直接看代码: package com.jtools; import java.io.BufferedReader; import java.io.I ...

  7. SpringMVC源码情操陶冶-View视图渲染

    本节简单分析View视图对象的render方法 View接口 最重要的就是render()方法,具体源码如下 /** * Render the view given the specified mod ...

  8. iOS图解多线程

    前言 多线程一直是iOS开发中重中之重的话题,无论是面试还是真正在公司中进行业务开发,都会经常使用到多线程来开发.笔者在简书上看到一张图,记录的是多线程的相关知识,笔者认为这是非常好的,推荐给大家: ...

  9. 安装j2ee开发环境

    先安装jdk,再安装eclipse ,再安装myeclipse. eclipse与myeclipse必须在图形化界面安装. 1. 挂载光驱/硬盘 mount  /mnt/cdrom/    挂载光驱 ...

  10. 让你的Dapper像EF一样调用 开源~!

    什么是Dapper? Dapper是一款轻量级的ORM框架,大名鼎鼎! 由谷歌Google 开发,在N款orm框架中 效率是最快的 最高的! 经过数据测试 比EF快 12-20 倍 国外最大的技术网站 ...