Javascript全屏显示问题

我一直在尝试在我的网站上添加文字粒子效果。我已经在Codepen上测试过了，效果很好，但在我的网站上不起作用

文本显示，但效果不符合要求。文本在屏幕上保持静止，但悬停效果在单词下方。 将鼠标移到屏幕底部时，效果对上面的文本有效

文本保持静止，但是，当我向下滚动时，文本效果的位置保持在屏幕底部，直到它在

div

下方结束并停止工作

我想知道是否有人能帮我把这个放在课文后面

此外，我还希望将文本的颜色更改为线性渐变，从

#125eaa

更改为

#d52027

“我的网站”页面的链接-

链接到我的代码笔-

然而，当我在JS Fiddle上运行这段代码时，它会给我一个404错误

您将看到，在下面运行代码和在Codepen上运行代码一样有效。它似乎不能正确地转换成全屏 任何帮助都会很好

我正在使用的代码

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=新数组（）；
var-cw=0；
var-ch=0；
var分辨率=1；
var n=0；
var timerRunning=错误；
var reshalfloor=0；
var resHalfCeil=0；
函数canv_mousemove（evt）
{
mx=evt.clientX-canv.offsetLeft；
my=evt.clientY-canv.offsetTop；
}
功能像素（homeX、homeY）
{
这个.homeX=homeX；
这个。homeY=homeY；
this.x=Math.random（）*cw；
this.y=Math.random（）*ch；
//tmp
这个.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 homedance=Math.sqrt（Math.pow（homeDX，2）+Math.pow（homeDY，2））；
var homeForce=回家距离*0.01；
var homeAngle=Math.atan2（homeDY，homeDX）；
var cursorForce=0；
var cursorAngle=0；
如果（mx>=0）
{
var cursorDX=this.x-mx；
var cursorDY=this.y-my；
var cursorDistanceSquared=Math.pow（cursorDX，2）+Math.pow（cursorDY，2）；
cursorForce=数学最小值（10000/cursorDistanceSquared，10000）；
cursorAngle=Math.atan2（cursorDY，cursorDX）；
}
其他的
{
游标力=0；
橙色=0；
}
这个.xVelocity+=homeForce*Math.cos（homeAngle）+cursorForce*Math.cos（cursorAngle）；
this.yVelocity+=homeForce*Math.sin（homeAngle）+cursorForce*Math.sin（cursorAngle）；
这个.xVelocity*=0.92；
这.yVelocity*=0.92；
这个.x+=这个.x速度；
this.y+=this.yVelocity；
}
函数$（id）
{
返回文档.getElementById（id）；
}
函数计时器（）
{
如果（！timerRunning）
{
timerRunning=true；
设置超时（定时器，33）；
对于（var i=0；i您应该基于画布维度而不是
document.body.clientWidth
等定义
cw
，
ch
变量

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

使用
canv.getBoundingClientRect
返回与视口相关的
宽度
/
高度
和
顶部
/
左侧
/
右侧
/
底部
属性将解决此问题

（您的代码笔也使用了错误的方法名称）

看哪一个基本上修改了以下方法

功能canvMousemove（evt）{
var rect=canv.getBoundingClientRect（）；
mx=evt.clientX-rect.left；
my=evt.clientY-rect.top；
}
函数体_resize（）{
var rect=canv.getBoundingClientRect（）
cw=矩形宽度；
ch=垂直高度；
控制台日志（ch）；
canv.width=cw；
canv.height=ch；
wordCanv.width=cw；
wordCanv.height=ch；
init（）；
}

在您的站点中，我注意到一个
计时器
方法，该方法也应修改为

函数计时器（）{
var-rect；
如果（！timerRunning）{
timerRunning=true；
设置超时（定时器，33）；
对于（变量i=0；i
如果更改画布的CSS维度（例如，更改为一半），则代码笔也将无法工作@GabrielePetrioli谢谢你的评论。我知道如果尺寸发生变化，codepen one将不起作用，我在那里做了更多的工作来证明它可以起作用。我的主要问题是如何处理它，使问题不存在，效果触发器直接位于图像的上方/后面。你知道如何排序吗？非常感谢。这是一个好问题大量帮助。我是Javascript新手，基本上尝试过从我见过的类似效果中提取不同的片段，并将它们拼接在一起，以制作自定义脚本。听起来没有随意性。你知道如何更改颜色渐变吗？我玩了很多次，但得到了很多nowhere@SupGen您需要更改
drawPixels
方法并使用引用RGBA（红、绿、蓝、阿尔法）的
actualData[index+1]
，
actualData[index+2]
，
actualData[index+3]
，并根据像素的
realX
，
realY
以任何方式设置它们。