1.国际惯例,先上效果图

一下效果图使用三次贝塞尔曲线进行连线,代码中有直接使用直线连线的代码,可直使用。

2.查看演示请看 这里

3 代码

    html:

  1. <canvas id="canvas" width="1920" height="1080"></canvas>

 js: 这代码看起来可以说十分直白了,注释不放过任何一个角落。

  1. var canvas = document.getElementById('canvas');
  2. var width = document.documentElement.clientWidth;
  3. var height = document.documentElement.clientHeight;
  4. canvas.width = width;
  5. canvas.height = height;
  6. var ctx = canvas.getContext('2d');
  7. var PI = Math.PI;
  8. // 点的数量
  9. var point_count = 100;
  10. // 存放点的数组
  11. var point_list = new Array(point_count);
  12. // 最大点间距
  13. var max_space = 50;
  14. // 每次更新位置最大的行进距离
  15. var max_speed = 1;
  16. // 点的半径
  17. var point_r = 3;
  18. // 线宽
  19. var lineWidth = 1;
  20. var strokeStyle = '#2779D7';
  21. var fillStyle = '#2779D7';
  22.  
  23. for (var i = 0; i < point_count; i++) {
  24. point_list[i] = {
  25. // x 轴位置
  26. x: Math.round(Math.random() * (width - point_r * 2)),
  27. // y 轴位置
  28. y: Math.round(Math.random() * (height - point_r * 2)),
  29. // x 轴速度
  30. speedX: Math.random() * max_speed * 2 - max_speed,
  31. // y 轴速度
  32. speedY: Math.random() * max_speed * 2 - max_speed,
  33. }
  34. }
  35.  
  36. function update() {
  37. point_list.forEach(function (value) {
  38. // 更新位置信息
  39. value.x += value.speedX;
  40. value.y += value.speedY;
  41. // 超出屏幕后 在屏幕另一侧对应位置出现
  42. // if (value.x > width + max_space) value.x = -max_space;
  43. // if (value.x < -max_space) value.x = width + max_space;
  44. // if (value.y > height + max_space) value.y = -max_space;
  45. // if (value.y < -max_space) value.y = height + max_space;
  46. // 碰壁反弹
  47. if (value.x > width || value.x < 0) value.speedX = -value.speedX;
  48. if (value.y > height || value.y < 0) value.speedY = -value.speedY;
  49. })
  50. }
  51.  
  52. function draw() {
  53. var arr = point_list;
  54. ctx.clearRect(0, 0, width, height)
  55. ctx.strokeStyle = strokeStyle;
  56. ctx.fillStyle = fillStyle;
  57. ctx.lineWidth = lineWidth;
  58. for (var i = 0; i < arr.length; i++) {
  59. ctx.beginPath()
  60. ctx.globalAlpha = 1
  61. ctx.arc(arr[i].x, arr[i].y, point_r, 0, PI * 2)
  62. ctx.fill()
  63. for (var j = i + 1; j < arr.length; j++) {
  64. // 计算每两个点的距离, 三角形的斜边 的平方 = 两直角边平方和
  65. var s = max_space - Math.sqrt((arr[j].x - arr[i].x) * (arr[j].x - arr[i].x) + (arr[j].y - arr[i].y) * (arr[j].y - arr[i].y));
  66. // 计算的两点之间线的透明度,如果距离小于最大距离 透明度为 1 , 如果大于 最大距离小于 1.5倍最大距离,透明度线性衰减,大于1.5倍时透明度为0
  67. var opc = (s >= 0 ? 1 : (s < - max_space / 2) ? 0 : 1 - s / - max_space * 2);
  68. // 通过线透明度判断是否需要画线,如果透明度大于零,就划线。
  69. if (opc > 0) {
  70. ctx.beginPath();
  71. ctx.globalAlpha = opc;
  72. // 画直线
  73. // ctx.moveTo(arr[i].x, arr[i].y);
  74. // ctx.lineTo(arr[j].x, arr[j].y);
  75. // 画贝塞尔曲线
  76. ctx.moveTo(arr[i].x, arr[i].y);
  77. ctx.bezierCurveTo(arr[i].x, arr[i].y + (arr[j].y - arr[i].y) * 0.5, arr[i].x + arr[j].x - arr[i].x, arr[i].y + (arr[j].y - arr[i].y) * 0.5, arr[j].x, arr[j].y);
  78. ctx.stroke();
  79. }
  80. }
  81. }
  82. // 更新位置
  83. update();
  84. }
  85. function loop() {
  86. // 循环程序
  87. draw();
  88. setTimeout(loop, 1000/60)
  89. }
  90. window.onload = loop;

()

canvas - 简单的神经网络的更多相关文章

  1. tensorflow学习笔记四:mnist实例--用简单的神经网络来训练和测试

    刚开始学习tf时,我们从简单的地方开始.卷积神经网络(CNN)是由简单的神经网络(NN)发展而来的,因此,我们的第一个例子,就从神经网络开始. 神经网络没有卷积功能,只有简单的三层:输入层,隐藏层和输 ...

  2. tensorflow笔记(二)之构造一个简单的神经网络

    tensorflow笔记(二)之构造一个简单的神经网络 版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7425200.html ...

  3. TensorFlow入门,基本介绍,基本概念,计算图,pip安装,helloworld示例,实现简单的神经网络

    TensorFlow入门,基本介绍,基本概念,计算图,pip安装,helloworld示例,实现简单的神经网络

  4. C++从零实现简单深度神经网络(基于OpenCV)

    代码地址如下:http://www.demodashi.com/demo/11138.html 一.准备工作 需要准备什么环境 需要安装有Visual Studio并且配置了OpenCV.能够使用Op ...

  5. 用pytorch1.0快速搭建简单的神经网络

    用pytorch1.0搭建简单的神经网络 import torch import torch.nn.functional as F # 包含激励函数 # 建立神经网络 # 先定义所有的层属性(__in ...

  6. 用pytorch1.0搭建简单的神经网络:进行多分类分析

    用pytorch1.0搭建简单的神经网络:进行多分类分析 import torch import torch.nn.functional as F # 包含激励函数 import matplotlib ...

  7. 用pytorch1.0搭建简单的神经网络:进行回归分析

    搭建简单的神经网络:进行回归分析 import torch import torch.nn.functional as F # 包含激励函数 import matplotlib.pyplot as p ...

  8. ensorflow学习笔记四:mnist实例--用简单的神经网络来训练和测试

    http://www.cnblogs.com/denny402/p/5852983.html ensorflow学习笔记四:mnist实例--用简单的神经网络来训练和测试   刚开始学习tf时,我们从 ...

  9. Python实现一个简单三层神经网络的搭建并测试

    python实现一个简单三层神经网络的搭建(有代码) 废话不多说了,直接步入正题,一个完整的神经网络一般由三层构成:输入层,隐藏层(可以有多层)和输出层.本文所构建的神经网络隐藏层只有一层.一个神经网 ...

随机推荐

  1. addClass+siblings+removeClass用意:

    $(this).addClass("li_add").siblings().removeClass("li_add").children('.floor2'). ...

  2. Using Xpath With Default XML Namespace in C#

    If you have a XML file without any prefix in the namespace: <bookstore xmlns="http://www.con ...

  3. day3 前奏

    1.第1个c语言 编辑---编译----运行 python@ubuntu:~/Desktop/pythons06$ vim -第1个c语言.c #include<stdio.h> int ...

  4. Nginx入门篇(六)之反向代理和负载均衡

    一.Nginx负载均衡集群 介绍 负载均衡(Load Balance)集群提供了一种行之有效的办法,来扩展网络设备和服务器负载.带宽和吞吐量,同时加强了网络数据处理能力,提供了网络的灵活性和可用性. ...

  5. python-模块详解

    模块: 模块的分类: 第三方模块/扩展模块:没在安装python解释器的时候安装的那些功能 自定义模块:你写的功能如果是一个通用的功能,那你就把它当做一个模块 内置模块:安装python解释器的时候跟 ...

  6. Spring Cloud(一):服务治理技术概览【Finchley 版】

    Spring Cloud(一):服务治理技术概览[Finchley 版]  发表于 2018-04-14 |  更新于 2018-05-07 |  Spring Cloud Netflix 是 Spr ...

  7. hdu6447

    YJJ's Salesman Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  8. 作业MathExamV2.0

    MathExam233 211614269 林凯 211601233张康凌 一.预估与实际 PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时( ...

  9. 关于解决MySort

    关于解决MySort 那天老师教给我们关于sort的用法以及String类中的split方法.在一定程度上告诉我们sort用法的原理和一些特别的用法后,老师叫我们用JAVA尝试去设计一个"M ...

  10. 网页调用vlc并播放网络视频

    环境:windows/android/ios windows端保存以下内容为reg文件并运行 Windows Registry Editor Version 5.00 [HKEY_CLASSES_RO ...