便利贴--13{随鼠标移动的canvas，未完成}

便利贴--13{随鼠标移动的canvas，未完成} canvas

canvas

class manyPoint {
  constructor(val) {}
}

//鼠标
class mouseAround {
  constructor(val) {
    this.num = val.num;
    this.size = val.size > val.aroundSize ? val.aroundSize : val.size;
    this.aroundSize = val.aroundSize;
    this.mouse = { x: +val.aroundSize / 2, y: +val.aroundSize / 2 };
    this.mouseType = this._isMobile() ? "touchmove" : "mousemove";
    this.ourData = [];
    this.canvas = null;
    this.see = false;
    this.ctx = null;
    this.init();
  }
  //判断是移动设备还是pc设备
  _isMobile() {
    const flag = navigator.userAgent.match(
      /(phone|pad|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows phone)/i
    );
    return flag;
  }

  //初始化
  init() {
    this.createCanvas();
    this.mouseMove(this.mouseType);
    this.createBall();
    // this.drawActive();
  }
  //创建画布
  createCanvas() {
    //生成画布
    let that = this;
    this.canvas = document.createElement("canvas");
    this.canvas.style.position = "absolute";
    // this.canvas.style.backgroundColor = "red";
    this.canvas.style.backgroundColor = "transparent";
    this.canvas.style.zIndex = "99999999";
    this.canvas.style.top = "0px";
    this.canvas.style.left = "0px";
    this.canvas.style.width = this.aroundSize + "px";
    this.canvas.style.height = this.aroundSize + "px";
    // this.canvas.style.borderRadius = this.aroundSize + "px";
    this.canvas.style.border = "1px solid red";
    // this.canvas.style.display = "none";
    // this.canvas.style.transition = "all 0.3s";
    document.querySelector("body").appendChild(this.canvas);
    this.ctx = this.canvas.getContext("2d");
  }
  //生成所有球
  createBall() {
    let that = this;
    this.ourData = [];
    //生成所有球
    for (let i = 0; i < this.num; i++) {
      //   this.ourData.push(this.getPosition());
      //   console.log(this.getRandom(1, 5));
      // console.log(this.randomDoubleFromRange(1, 5));
      //   console.log(this.getColor());
      let color = this.getColor();
      let d = new manyPoint({
        x: +that.mouse.x,
        y: +that.mouse.y,
        // x: +that.mouse.x + +that.aroundSize / 2,
        // y: +that.mouse.y + +that.aroundSize / 2,
        color: color,
        radius: that.size,
        theta: that.randomDoubleFromRange(0, 2 * Math.PI),
        speed: 0.05,
        ctx: that.ctx,
        distance: that.getRandom(70, 90),
      });
      // let d = {
      //   x: that.getRandom(10, that.aroundSize),
      //   y: that.getRandom(10, that.aroundSize),
      //   // x: +that.mouse.x + +that.aroundSize / 2,
      //   // y: +that.mouse.y + +that.aroundSize / 2,
      //   color: color,
      //   radius: that.size,
      //   theta: that.randomDoubleFromRange(0, 2 * Math.PI),
      //   speed: 0.05,
      //   ctx: that.ctx,
      //   distance: that.getRandom(70, 90),
      // };
      this.ourData.push(d);
    }
    // console.log(this.ourData);
  }
  //移动事件
  mouseMove(type) {
    let that = this;
    //加载鼠标移动事件
    window.addEventListener(type, function (window) {
      //给数组中的x和y修改值
      let x = window.clientX || window.changedTouches[0].clientX;
      let y = window.clientY || window.changedTouches[0].clientY;
      that.mouse.x = x;
      that.mouse.y = y;
      that.canvas.style.top = +y - +that.aroundSize / 2 + "px";
      that.canvas.style.left = +x - +that.aroundSize / 2 + "px";
      // console.log(x, y);
    });
    //加载鼠标点击开始事件
    window.addEventListener(
      type == "touchmove" ? "touchstart" : "mouseover",
      function (window) {
        //给数组中的x和y修改值
        let x = window.clientX || window.changedTouches[0].clientX;
        let y = window.clientY || window.changedTouches[0].clientY;
        that.mouse.x = x;
        that.mouse.y = y;
        that.canvas.style.top = +y - +that.aroundSize / 2 + "px";
        that.canvas.style.left = +x - +that.aroundSize / 2 + "px";
        // that.canvas.style.display = "block";
        that.see = true;
        that.ctx.fillStyle = that.getColor();
        that.ctx.beginPath();
        that.ctx.arc(20, 20, 20, 0, Math.PI * 2, true);
        that.ctx.closePath();
        that.ctx.fill();
      }
    );
    //加载鼠标点击结束事件
    window.addEventListener(
      type == "touchmove" ? "touchend" : "mouseout",
      function (window) {
        // that.canvas.style.display = "none";
        that.see = false;
      }
    );
  }
  //启动绘画
  drawActive() {
    let that = this;
    let draws = () => {
      that.ctx.fillStyle = "rgba(255, 255, 255, 0)";
      that.ctx.fillRect(0, 0, that.canvas.width, that.canvas.height);
      // for (var p of that.ourData) {
      //   p.update();
      // }
      // that.ctx.clearRect(0, 0, that.canvas.width, that.canvas.height);
      for (var p of that.ourData) {
        // console.log(p);
        this.drawPoint(p);
      }
    };
    // requestAnimationFrame(draws);
    setInterval(() => {
      draws();
    }, 10);
  }
  // drawPoint(p) {
  //   let that = this;
  //   // console.log(p);
  //   p.ctx.fillStyle = p.color;
  //   p.ctx.beginPath();
  //   p.ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2, true);
  //   p.ctx.closePath();
  //   p.ctx.fill();
  // }
  //工具↓
  //获取坐标
  getPosition() {
    let data = { x: "", y: "" };
    return data;
  }
  getRandom(a, b) {
    b++;
    return Math.floor(Math.random() * Math.abs(a - b)) + Math.min(a, b);
  }
  getColor() {
    var color = "#";
    for (var i = 0; i < 3; i++) {
      var hex = this.getRandom(0, 255).toString(16);
      color += hex.length === 1 ? "0" + hex : hex;
    }
    return color;
  }
  //获取随机数 但是不取整
  randomDoubleFromRange(a, b) {
    return Math.random() * Math.abs(a - b) + Math.min(a, b);
  }
}

const setcc = {
  state: {},
  mutations: {},
  actions: {
    mouseAroundInit() {
      let mouse = new mouseAround({ num: 1, size: 20, aroundSize: 100 });
    },
  },
};

export default setcc;