@nicecode/funny/es/liziBg/index.js

funny,一些有趣的代码,funny code

// @ts-nocheck
import React, { useRef, useEffect } from 'react';
export default (function () {
  var canvasRef = useRef();
  function init() {
    var theCanvas = canvasRef.current,
      ctx = theCanvas.getContext('2d'),
      current_point = {
        x: null,
        //当前鼠标x
        y: null,
        //当前鼠标y
        max: 20000
      };
    var canvas_width = theCanvas.width,
      canvas_height = theCanvas.height,
      random_points = [],
      all_points = [];

    // theCanvas.style = "position: absolute; top: 0px; left: 0px;";

    function draw() {
      //清屏
      ctx.clearRect(0, 0, canvas_width, canvas_height);
      var i, pi, x_dist, y_dist, dist, w;

      //遍历点集合绘制线条，类似于握手问题，两个点只绘制一条线
      random_points.forEach(function (p, index) {
        p.x += p.xa,
        //按指定速度移动
        p.y += p.ya,
        //小球碰撞则速度取相反数
        p.xa *= p.x > canvas_width || p.x < 0 ? -1 : 1, p.ya *= p.y > canvas_height || p.y < 0 ? -1 : 1, ctx.fillRect(p.x - 0.5, p.y - 0.5, 1, 1); //绘制点

        for (i = index + 1; i < all_points.length; i++) {
          pi = all_points[i];
          if (pi.x !== null && pi.y !== null) {
            x_dist = p.x - pi.x;
            y_dist = p.y - pi.y;
            dist = x_dist * x_dist + y_dist * y_dist;
            //当两点距离小于极限距离时会产生连线，当第二个点是鼠标所产生点时，第一个点在范围内会产生向鼠标点的速度，产生吸附效果
            dist < pi.max && pi === current_point && dist >= pi.max / 2 && (p.x -= 0.03 * x_dist, p.y -= 0.03 * y_dist);
            //根据距离计算连线的透明度，使过度效果流畅
            w = (pi.max - dist) / pi.max;
            ctx.beginPath();
            ctx.lineWidth = w / 2;
            ctx.strokeStyle = "rgba(110,110,110,".concat(w + 0.2, ")");
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(pi.x, pi.y);
            ctx.stroke();
          }
        }
      }), requestAnimationFrame(draw);
    }

    //绑定事件，判断是否添加鼠标这个点
    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;
    };

    //随机生成100个点
    for (var i = 0; i < 100; i++) {
      var x = Math.random() * canvas_width,
        //初始坐标
        y = Math.random() * canvas_height,
        xa = 2 * Math.random() - 1,
        //x速度
        ya = 2 * Math.random() - 1,
        //y速度
        max = 6000; //会产生连线的距离的平方

      random_points[i] = {
        x: x,
        y: y,
        xa: xa,
        ya: ya,
        max: max
      };
    }
    //将鼠标的点添加至点集合中
    all_points = [].concat(random_points, [current_point]);

    //只是背景特效-所以延迟执行
    setTimeout(draw, 100);
  }
  useEffect(function () {
    init();
  }, []);
  return /*#__PURE__*/React.createElement("div", {
    style: {
      position: 'relative'
    }
  }, /*#__PURE__*/React.createElement("canvas", {
    ref: canvasRef,
    width: "500px",
    height: "300px"
  }));
});