Javascript 画布移动方块故障/滚动集成

我正试图教自己如何使用canvas——我可能有些不知所措——但我想问一下，是否有人能解决我遇到的这个问题

作为一个教训，我决定尝试从这个metaball想法开始：

并对其进行返工，使变形球保持静止，但在向下滚动页面时会以不同的速率向上移动

我在这里找到了它的工作原理——在小提琴上的表现比下面好得多。

函数getScrollOffsets（）{ var doc=单据，w=窗口； 变量x，y，docEl； 如果（w.pageYOffset的类型=='number'）{ x=w.pageXOffset； y=w.pageYOffset； }否则{ docEl=（doc.compatMode&&doc.compatMode==='CSS1Compat'）？ doc.documentElement：单据体； x=docEl.left； y=docEl.scrollTop； } 返回{x:x，y:y}； } var熔岩，ballData； ballData=新数组（）； （功能（）{ var metabrobe=metabrobe | |{ 屏幕：{ 元素：空， 回调：null， ctx:null， 宽度：0， 高度:0,， 左:0,， 排名：0， init：函数（id、回调、initRes）{ this.elem=document.getElementById（id）； this.callback=callback | | null； 如果（this.elem.tagName==“CANVAS”）this.ctx=this.elem.getContext（“2d”）； window.addEventListener（'resize'，函数（）{ 这是resize（）； }.绑定（此），假）； this.elem.onselectstart=函数（）{return false；} this.elem.ondrag=函数（）{return false；} initRes&&this.resize（）； 归还这个； }, 调整大小：函数（）{ var o=此.elem； 此宽度=o.offsetWidth； 此高度=0.5米远； for（this.left=0，this.top=0；o！=null；o=o.offsetParent）{ this.left+=o.offsetLeft； this.top+=o.offsetTop； } if（this.ctx）{ this.elem.width=this.width； this.elem.height=this.height； } this.callback&&this.callback（）； }, 指针：{ 屏幕：空， 元素：空， 回调：null， pos:{x:0，y:0}， mov:{x:0，y:0}， 拖动：{x:0，y:0}， 开始：{x:0，y:0}， 结束：{x:0，y:0}， 活动：错误， 触摸：错， 移动：功能（e、触摸）{ //this.active=true； this.touch=触摸； e、 预防默认值（）； var指针=触摸？e.触摸[0]：e； this.mov.x=pointer.clientX-this.screen.left； this.mov.y=pointer.clientY-this.screen.top； 如果（此.active）{ this.pos.x=this.mov.x； this.pos.y=this.mov.y； this.drag.x=this.end.x-（this.pos.x-this.start.x）； this.drag.y=this.end.y-（this.pos.y-this.start.y）； this.callback.move&&this.callback.move（）； } }, 滚动：功能（e、触摸）{ run（）； }, init：函数（回调）{ this.screen=metabrobe.screen； this.elem=this.screen.elem； this.callback=callback | |{}； 如果（'ontouchstart'在窗口中）{ //触碰 this.elem.ontouchstart=函数（e）{this.down（e，true）；}.bind（this）； this.elem.ontouchmove=函数（e）{this.move（e，true）；}.bind（this）； this.elem.ontouchend=函数（e）{this.up（e，true）；}.bind（this）； this.elem.ontouchcancel=函数（e）{this.up（e，true）；}.bind（this）； } document.addEventListener（“mousemove”，函数（e）{this.move（e，false）；}.bind（this），true）； document.addEventListener（“scroll”，函数（e）{this.scroll（e，false）；}.bind（this），true）； 归还这个； } }, } } //==点构造函数==== 变量点=函数（x，y）{ 这个.x=x； 这个。y=y； 这个量值=x*x+y*y； 该值为0； 这个力=0； } Point.prototype.add=函数（p）{ 返回新点（this.x+p.x，this.y+p.y）； } //==球构造函数==== var Ball=函数（父函数，i）{ var x=Math.floor（Math.random（）*window.innerWidth）+1； 变量y=数学地板（数学随机（）*（窗口内部高度）*5）+1； 变量半径=（数学地板（数学随机（）*65）+15） var drift=Math.random（）； 球数据[i]=[x，y，半径，漂移]； this.vel=新点（0,0）； this.pos=新点（x，y）； 该尺寸=半径； this.width=parent.width； this.height=parent.height； } //==移动球==== Ball.prototype.move=函数（i）{ //----与指针交互---- 如果（指针.活动）{ var dx=指针.pos.x-此.pos.x； var dy=指针.pos.y-此.pos.y； var a=数学常数2（dy，dx）； var v=-Math.min( 10, 500/Math.sqrt（dx*dx+dy*dy） ); this.pos=this.pos.add( 新点( 数学cos（a）*v， 数学单（a）*v ) ); } var漂移=ballData[i-1][3]； var pageOffset=getScrollOffsets（）.y； 此.pos.y=ballData[i-1][1]（页面偏移*漂移）； 该.vel.y=0-（页面偏移*漂移）； this.pos=this.pos.add（this.vel）； } //===lavalamp构造函数==== var LavaLamp=功能（宽度、高度、数量）{ 这个步骤=4； 这个。宽度=宽度； 高度=高度； this.wh=数学最小值（宽度、高度）； this.sx=数学地板（this.width/this.step）； this.sy=数学地板（this.height/this.step）； 这个.paint=false； this.metaFill='#000000'； this.plx=[0,0,1,0,1,1,1,1,1,1,0,1,0,0,0]； this.ply=[0,0,0,0,0,0,1,0,0,1,1,0,1,1,0,1]； this.mscases=[0,3,0,3,1,3,0,3,2,2,0,2,1,1,0]； this.ix=[1,0，-1,0,0,1,0，-1,0,1,0,0,1,1,0,0,0,1,1]； this.grid=[]； this.balls=[]； 这是iter=0； 这个符号=1； //----初始化网格---- 对于（var i=0；i<（this.sx+2）*（this.sy+2）；i++）{ this.grid[i]=新点( （i%（this.sx+2））*this.step，（数学地板（i/（this.sx+2）））*this.step ) } //----创建元球---- 对于（变量i=0；i<50；i++）{ 这个.球[i]=