Question

您好，找到了我想使用的一段代码，但我不了解所有内容。

如果您在此处在线查看我的示例：https://codepen.io/xifeat/pen/ErrNzw

您可以看到，如果将光标移动到粒子旁边，则它不会在光标下方移动，而是向下移动几个像素。

这是因为我添加了文本“ Hello hello hello”，所以计算不再有效。如何调整该值？

JS

    window.onload = function() {
  var textes = ["", ];
  var mouse = {
    x: -100,
    y: -100
  }
  var canvas = document.createElement("canvas");
  canvas.id = "boxed";
  var ctx = canvas.getContext("2d");
  var retina = window.devicePixelRatio > 1 ? true : false;

  function setConvasSize() {
    if (retina) {
      canvas.width = window.innerWidth * 2;
      canvas.height = window.innerHeight * 2;
    } else {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }
    canvas.style.width = window.innerWidth+"px";
    canvas.style.height = window.innerHeight+"px";
  }
  setConvasSize()
  window.onresize = setConvasSize;

//  document.body.appendChild(canvas);
document.getElementById('boxed').appendChild(canvas); 
  ctx.fillStyle = "red";
  ctx.fillRect(0,0,canvas.width, canvas.height);
  var particles = [];
  var patriclesNum = 200;
  var rad = 2;
  if (retina) {
    patriclesNum *= 2; 
    rad++;
  }
  for(var i = 0; i<patriclesNum; i++)
    particles.push(new multi_part());
  function multi_part(){
    this.x = Math.random()*canvas.width;
    this.y = Math.random()*canvas.height;
    this.vx = Math.random()*0.88-0.44;
    this.vy = Math.random()*0.88-0.44;
    this.rad = Math.floor(Math.random()*200)/100+1;
  }     
  function move_part(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for(var i = 0;i < patriclesNum; i++){
      var temp = particles[i];
      var distParticule = findDistance(temp, mouse);
      if (textes[i]) {
        ctx.font = retina ? "200 22px sans-serif" : "100 14px sans-serif";
        ctx.textAlign = "right";
        ctx.globalAlpha =20;
        ctx.fillStyle = 'black';
        ctx.fillText(textes[i], temp.x-10, temp.y);
      };


       var distretina = retina ? 150 : 100;
      if(distParticule<distretina){
        createLine(temp, mouse, distParticule);
      }
      for(var j = 0; j<patriclesNum; j++){
        var temp2 = (temp != particles[j]) ? particles[j] : false;
        ctx.linewidth = 1;
        if (temp2) {
          var distParticule = findDistance(temp, temp2);
          if(distParticule<distretina){
            createLine(temp, temp2, distParticule);
          }
        };
      }
      ctx.fillStyle = 'grey';
      ctx.beginPath();
      ctx.globalAlpha = 1;
      ctx.arc(temp.x, temp.y, temp.rad, 0, Math.PI*2, true);
      ctx.fill();
      ctx.closePath();
      temp.x += temp.vx;
      temp.y += temp.vy;
      if(temp.x > canvas.width) temp.x = 0;
      if(temp.x < 0) temp.x = canvas.width;
      if(temp.y > canvas.height) temp.y = 0;
      if(temp.y < 0) temp.y = canvas.height;
    }
  }
  function createLine(p1, p2, d) {
    ctx.strokeStyle = '#c4c4c4';
    ctx.globalAlpha = 50/d-0.3;
    ctx.beginPath();
    ctx.moveTo(p1.x, p1.y);
    ctx.lineTo(p2.x, p2.y);
    ctx.stroke();
  }
  function findDistance(p1,p2){  
    return Math.sqrt( Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2) );;
  }
  if (window.Event)
    document.captureEvents(Event.MOUSEMOVE);
  document.onmousemove = mouseMoveCanvas;
  function mouseMoveCanvas(e) {
    mouseX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
    mouseY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    mouse = {
      x: mouseX,
      y: mouseY
    }
  }
  setInterval(move_part, 33);
};

我认为是findDistance函数执行该计算，但是如何获取类“ test”的值？

<html>
<head>
<title>test</title>
</head>

<body>
<div class="test">Hello Hello Hello</div>
<div id="boxed"></div>
<div class="test3">THIS IS MY FOOTER</div>

</body>

</html>

如何计算画布中的光标位置

0 个答案: