bg4.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. export function bgStart(){
  2. //更新页面用requestAnimationFrame替代setTimeout
  3. window.requestAnimationFrame = window.requestAnimationFrame
  4. || window.mozRequestAnimationFrame
  5. || window.webkitRequestAnimationFrame
  6. || window.msRequestAnimationFrame;
  7. var canvas = document.getElementById('canvas');
  8. var ctx = canvas.getContext('2d');
  9. var w = canvas.width = canvas.offsetWidth;
  10. var h = canvas.height = canvas.offsetHeight;
  11. var circles = [];
  12. var current_circle = new currentCircle(0, 0);
  13. function init(num) {
  14. document.getElementById('userLayout').style.background='#333'
  15. for(var i = 0; i < num; i ++) {
  16. circles.push(new circle(Math.random() * w, Math.random() * h));
  17. }
  18. draw();
  19. }
  20. function draw() {
  21. ctx.clearRect(0, 0, w, h);
  22. for(var i = 0; i < circles.length; i ++) {
  23. circles[i].move(w, h);
  24. circles[i].drawCircle(ctx);
  25. for(var j = i + 1; j < circles.length; j++) {
  26. circles[i].drawLine(ctx, circles[j]);
  27. }
  28. }
  29. if (current_circle.x) {
  30. current_circle.drawCircle(ctx);
  31. for (var k = 0; k < circles.length; k++) {
  32. current_circle.drawLine(ctx, circles[k])
  33. }
  34. }
  35. requestAnimationFrame(draw);
  36. }
  37. window.onmousemove = function(e) {
  38. e = e || window.event;
  39. current_circle.x = e.clientX;
  40. current_circle.y = e.clientY;
  41. }
  42. window.onmouseout = function() {
  43. current_circle.x = null;
  44. current_circle.y = null;
  45. }
  46. //创建对象:圆
  47. //x, y为坐标点, r为半径, _mx, _my为移动的距离
  48. function circle(x, y) {
  49. this.x = x;
  50. this.y = y;
  51. this.r = Math.random() * 10;
  52. this._mx = 1 - (Math.random() * 2);
  53. this._my = 1 - (Math.random() * 2);
  54. //canvas画圆
  55. this.drawCircle = drawCircle;
  56. function drawCircle(ctx) {
  57. ctx.beginPath();
  58. ctx.arc(this.x, this.y, this.r, 0, 360);
  59. ctx.fillStyle = 'rgba(204, 204, 204, 0.3)';
  60. ctx.fill();
  61. }
  62. this.move = move;
  63. function move(w, h) {
  64. this._mx = (this.x < w && this.x > 0) ? this._mx : (-this._mx);
  65. this._my = (this.y < h && this.y > 0) ? this._my : (-this._my);
  66. this.x += this._mx / 2;
  67. this.y += this._my / 2;
  68. }
  69. //canvas画线
  70. //画直线是两个圆连线,为了避免直线过多,给圆圈距离设置了一个值,距离很远的圆圈,就不做连线处理
  71. this.drawLine = drawLine;
  72. function drawLine(ctx, _circle) {
  73. var dx = this.x - _circle.x;
  74. var dy = this.y - _circle.y;
  75. var d = Math.sqrt(dx * dx + dy * dy);
  76. if (d < 150) {
  77. ctx.beginPath();
  78. ctx.moveTo(this.x, this.y);//起点
  79. ctx.lineTo(_circle.x, _circle.y);//终点
  80. ctx.strokeStyle = 'rgba(204, 204, 204, 0.3)';
  81. ctx.stroke();
  82. }
  83. }
  84. }
  85. function currentCircle(x, y) {
  86. circle.call(this, x, y);
  87. this.drawCircle = drawCircle;
  88. function drawCircle(ctx) {
  89. ctx.beginPath();
  90. ctx.arc(this.x, this.y, 8, 0, 360);
  91. ctx.fillStyle = 'rgba(255, 77, 54, 0.6)';
  92. ctx.fill();
  93. }
  94. }
  95. init(100)
  96. }