Question

我一直在尝试在我的网站上添加文本粒子效果。我已经在Codepen上对其进行了测试，效果很好，但在我的网站上却无法正常工作。

显示文本，但效果未按要求工作。文本在屏幕上停留在静态位置，但悬停效果在单词下方。仔细阅读全文，如果我将鼠标移至屏幕底部，则效果将作用于上方的文本。

文本保持静态，但是，当我向下滚动时，文本效果的位置将停留在屏幕底部，直到最终到达div以下并停止一起工作。

我想知道是否有人可以帮助我将其置于文本后面。

我也很想将文本的颜色更改为从#125eaa到#d52027的线性渐变

指向我网站页面的链接-https://www.supplementgenie.co.uk/testpage

链接到我的代码笔-https://codepen.io/Paulmcf87/pen/gjpgOB

但是，当我在JS Fiddle上运行此代码时，却出现404错误？

您将看到，在其下运行代码与在Codepen上一样有效。它似乎无法正确转换为全屏任何帮助都很好

我正在使用的代码

var pixels=new Array();
    var canv=$('canv');
    var ctx=canv.getContext('2d');
    var wordCanv=$('wordCanv');
    var wordCtx=wordCanv.getContext('2d');
    var mx=-1;
    var my=-1;
    var words="";
    var txt=new Array();
    var cw=0;
    var ch=0;
    var resolution=1;
    var n=0;
    var timerRunning=false;
    var resHalfFloor=0;
    var resHalfCeil=0;
    function canv_mousemove(evt)
    {
      mx=evt.clientX-canv.offsetLeft;
      my=evt.clientY-canv.offsetTop;
    }
    function Pixel(homeX,homeY)
    {
      this.homeX=homeX;
      this.homeY=homeY;
      this.x=Math.random()*cw;
      this.y=Math.random()*ch;
      //tmp
      this.xVelocity=Math.random()*10-5;
      this.yVelocity=Math.random()*10-5;
    }
    Pixel.prototype.move=function()
    {
      var homeDX=this.homeX-this.x;
      var homeDY=this.homeY-this.y;
      var homeDistance=Math.sqrt(Math.pow(homeDX,2) + Math.pow(homeDY,2));
      var homeForce=homeDistance*0.01;
      var homeAngle=Math.atan2(homeDY,homeDX);
      var cursorForce=0;
      var cursorAngle=0;
      if(mx >= 0)
      {
        var cursorDX=this.x-mx;
        var cursorDY=this.y-my;
        var cursorDistanceSquared=Math.pow(cursorDX,2) + Math.pow(cursorDY,2);
        cursorForce=Math.min(10000/cursorDistanceSquared,10000);
        cursorAngle=Math.atan2(cursorDY,cursorDX);
      }
      else
      {
        cursorForce=0;
        cursorAngle=0;
      }
      this.xVelocity+=homeForce*Math.cos(homeAngle) + cursorForce*Math.cos(cursorAngle);
      this.yVelocity+=homeForce*Math.sin(homeAngle) + cursorForce*Math.sin(cursorAngle);
      this.xVelocity*=0.92;
      this.yVelocity*=0.92;
      this.x+=this.xVelocity;
      this.y+=this.yVelocity;
    }
    function $(id)
    {
      return document.getElementById(id);
    }
    function timer()
    {
      if(!timerRunning)
      {
        timerRunning=true;
        setTimeout(timer,33);
        for(var i=0;i<pixels.length;i++)
        {
          pixels[i].move();
        }
        drawPixels();
        wordsTxt.focus();
        n++;
        if(n%10==0 && (cw!=document.body.clientWidth || ch!=document.body.clientHeight)) body_resize();
        timerRunning=false;
      }
      else
      {
        setTimeout(timer,10);
      }
    }
    function getRandomColor(min, max) {
      return Math.random() * (max - min) + min;
    }
    function drawPixels()
    {
      var imageData=ctx.createImageData(cw,ch);
      var actualData=imageData.data;
      var index;
      var goodX;
      var goodY;
      var realX;
      var realY;
      for(var i=0;i<pixels.length;i++)
      {
        goodX=Math.floor(pixels[i].x);
        goodY=Math.floor(pixels[i].y);
        for(realX=goodX-resHalfFloor; realX<=goodX+resHalfCeil && realX>=0 && realX<cw;realX++)
        {
          for(realY=goodY-resHalfFloor; realY<=goodY+resHalfCeil && realY>=0 && realY<ch;realY++)
          {
            index=(realY*imageData.width + realX)*4;
            actualData[index+3]=realX;
            actualData[index+2]=realX;
            actualData[index+1]=realY;
          }
        }
      }
      imageData.data=actualData;
      ctx.putImageData(imageData,0,0);
    }
    function readWords()
    {
      words=$('wordsTxt').value;
      txt=words.split('\n');
    }
    function init()
    {
      readWords();
      var fontSize=200;
      var wordWidth=0;
      do
      {
        wordWidth=0;
        fontSize-=5;
        wordCtx.font=fontSize+"px Avenir, sans-serif";
        for(var i=0;i<txt.length;i++)
        {
          var w=wordCtx.measureText(txt[i]).width;
          if(w>wordWidth) wordWidth=w;
        }
      } while(wordWidth>cw-50 || fontSize*txt.length > ch-50)
      wordCtx.clearRect(0,0,cw,ch);
      wordCtx.textAlign="center";
      wordCtx.textBaseline="middle";
      for(var i=0;i<txt.length;i++)
      {
        wordCtx.fillText(txt[i],cw/2,ch/2 - fontSize*(txt.length/2-(i+0.5)));
      }
      var index=0;
      var imageData=wordCtx.getImageData(0,0,cw,ch);
      for(var x=0;x<imageData.width;x+=resolution) //var i=0;i<imageData.data.length;i+=4)
      {
        for(var y=0;y<imageData.height;y+=resolution)
        {
          i=(y*imageData.width + x)*4;
          if(imageData.data[i+3]>128)
          {
            if(index >= pixels.length)
            {
              pixels[index]=new Pixel(x,y);
            }
            else
            {
              pixels[index].homeX=x;
              pixels[index].homeY=y;
            }
            index++;
          }
        }
      }
      pixels.splice(index,pixels.length-index);
    }
    function body_resize()
    {
      cw=document.body.clientWidth;
      ch=document.body.clientHeight;
      canv.width=cw;
      canv.height=ch;
      wordCanv.width=cw;
      wordCanv.height=ch;
      init();
    }
    wordsTxt.focus();
    wordsTxt.value="Supplement Genie";
          resolution=1;
    resHalfFloor=Math.floor(resolution/2);
    resHalfCeil=Math.ceil(resolution/2);
    body_resize();
    timer();

#wordsTxt{
    display:none
}
div.pixeltext canvas{
    width:98vw;
    height:100vh;
}
div.pixeltext{
    background-color: #d52027;

 <div class="pixeltext">
 <canvas id="canv" onmousemove="canv_mousemove(event);" onmouseout="mx=-1;my=-1;">
    you need a canvas-enabled browser, such as Google Chrome
  </canvas>
  <canvas id="wordCanv" width="500px" height="500px" style="border:1px solid black;display:none;">
  </canvas>
<textarea id="wordsTxt" style="position:absolute;left:-100;top:-100;" onblur="init();" onkeyup="init();" onclick="init();"></textarea>
<div>

Answer 1

您应基于画布尺寸而不是cw等来定义ch，document.body.clientWidth变量。

另外，由于您的元素位于其他定位的元素内，并且canv.offsetLeft属性返回相对于最接近的祖先的位置，因此您也应避免使用canv.offsetTop和offset。

使用canv.getBoundingClientRect返回width / height和top / left / right / bottom属性视口将解决问题。

（您的Codepen也使用了您创建的方法的错误名称）

请参见https://codepen.io/gpetrioli/pen/rreagp，该方法基本上修改了以下方法

function canvMousemove(evt) {
  var rect = canv.getBoundingClientRect();
  mx = evt.clientX - rect.left;
  my = evt.clientY - rect.top;
}

function body_resize() {
  var rect = canv.getBoundingClientRect()
  cw = rect.width;
  ch = rect.height;

  console.log(ch);
  canv.width = cw;
  canv.height = ch;
  wordCanv.width = cw;
  wordCanv.height = ch;

  init();
}

在您的网站中，我注意到一种timer方法，该方法也应修改为

function timer() {
  var rect;
  if (!timerRunning) {
    timerRunning = true;
    setTimeout(timer, 33);
    for (var i = 0; i < pixels.length; i++) {
      pixels[i].move();
    }
    drawPixels();
    wordsTxt.focus();
    n++;

    rect = canv.getBoundingClientRect();
    if (n % 10 == 0 && (cw != rect.width || ch != rect.height)) body_resize();
    timerRunning = false;
  } else {
    setTimeout(timer, 10);
  }
}

Javascript全屏显示问题

1 个答案: