Javascript 如何在2<；之间使用html画布；部门>；s

我试图在我的html页面中间使用画布，但效果不好。我想在div中使用ribbon效果。当没有div时效果很好，当有div或其他元素时效果不好。我想在两个分区之间使用画布。我在codepen中使用了彩带笔，并将在下面发布代码。我想知道如何在我的html页面中使用它

var TWO_PI=Math.PI*2；
var HALF_PI=Math.PI*0.5；
var厚度=12；
变量长度=10；
var阶跃=0.1；
var FPS=1000/60；
功能粒子（x，y，质量）{
这个.x=x | | 0；
这个.y=y | | 0；
this.ox=this.x；
this.oy=this.y；
this.mass=质量| | 1.0；
this.massInv=1.0/this.mass；
this.fixed=false；
this.update=函数（dt）{
如果（！this.fixed）{
var fx=0.0000；
var fy=0.0000；
var tx=这个.x，
ty=这个。y；
this.x+=（this.x-this.ox）+fx*this.massInv*dt*dt；
this.y+=（this.y-this.oy）+fy*this.massInv*dt*dt；
this.ox=tx；
this.oy=ty；
}
};
};
功能弹簧（p1、p2、长度、强度）{
这是1.p1=p1；
这是p2=p2；
this.restLength=restLength | | 10；
这个强度=强度| | 1.0；
this.update=函数（dt）{
//计算所需力
变量dx=p2.x-p1.x，
dy=p2.y-p1.y，
dd=数学sqrt（dx*dx+dy*dy）+0.0001，
tf=（dd-this.restLength）/（dd*（p1.massInv+p2.massInv））*this.strength，
F
//施力
如果（！p1.固定）{
f=tf*p1.nv；
p1.x+=dx*f；
p1.y+=dy*f；
}
如果（！p2.固定）{
f=-tf*p2.nv；
p2.x+=dx*f；
p2.y+=dy*f；
}
}
};
函数Sim（）{
这是粒子=[]；
this.springs=[]；
this.tick=函数（dt）{
变量i，n；
对于（i=0，n=this.springs.length；i0）{
s=新弹簧（np，op，step，0.95）；
模拟弹簧推力；
}
op=np；
}
//固定第一个粒子
锚定=模拟粒子[0]；
//anchor.fixed=true；
锚定x=50；
锚。y=50；
//用鼠标移动最后一个粒子
鼠标=模拟粒子[计数-1]；
mouse.fixed=true；
canvas.addEventListener（'mousemove'，函数（事件）{
mouse.x=event.clientX；
mouse.y=event.clientY；
});
};
函数步骤（）{
var now=new Date（）.getTime（），
delta=现在-旧；
模拟刻度（三角洲）；
//透明帆布
canvas.width=canvas.width；
var points=[]；//中点
变量角度=[]；//增量角度
变量i，n，p1，p2，dx，dy，mx，my，sin，cos，theta；
//计算中点和角度
对于（i=0，n=sim.particles.length-1；i=0；--i）{
p1=模拟粒子[i+1]；
p2=点[i]；
θ=角度[i]；
r=数学sin（（i/n）*数学PI）*厚度；
sin=数学sin（θ+半π）*r；
cos=数学cos（θ+半π）*r；
二次曲线(
p1.x+cos，
p1.y+sin，
p2.x+cos，
p2.y+sin）；
}
context.strokeStyle='rgba（255255,0.1）'；
context.lineWidth=8；
stroke（）；
context.strokeStyle='rgba（0,0,0,0.8）'；
context.lineWidth=0.5；
stroke（）；
context.fillStyle='rgba（255255,0.9）'；
context.fill（）；
旧=现在；
设置超时（步长，FPS）；
};
函数resize（）{
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
}
addEventListener（“调整大小”，调整大小）；
调整大小（）；
init（）；
步骤（）

晃动鼠标…
这里有一种方法：

HTML:

<div class="top">
top
</div>
<div class="middle">
<canvas id='world' width='500' height='500'></canvas>
<header><h1>Wiggle your mouse...</h1></header>
</div>
<div class="bottom">
bottom
</div>

js保持不变。CSS为顶部和底部div提供了一定的高度。画布在中间的div中。这是一个jsFoDels: 

div { 
border: 1px solid black
}

.top, .bottom { 
height: 200px
}