Javascript 制作画布覆盖按钮

我有一个画布，点击时有一个链接，但画布并没有覆盖整个按钮。我该怎么做？这是我的画布：

//让我们在HTML5画布和JS中创建一个简单的粒子系统
//初始化画布
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//画布尺寸
var W=500；var H=500；
//让我们创建一个粒子阵列
var粒子=[]；
对于（变量i=0；i<50；i++）
{
//这将向具有随机位置的阵列添加50个粒子
粒子。推（新建创建_粒子（））；
}
//让我们创建一个函数，它将帮助我们创建多个粒子
函数create_particle（）
{
//画布上的任意位置
this.x=Math.random（）*W；
this.y=Math.random（）*H；
//让我们为每个粒子添加随机速度
this.vx=Math.random（）*20-10；
this.vy=Math.random（）*20-10；
//随机颜色
var r=Math.random（）*255>>0；
var g=Math.random（）*255>>0；
var b=Math.random（）*255>>0；
this.color=“rgba（“+r+”，“+g+”，“+b+”，0.5）”；
//随机大小
this.radius=Math.random（）*10+10；
}
var x=100；变量y=100；
//让我们为粒子设置动画
函数绘图（）
{
//移动此BG绘制代码insde draw（）将有助于删除痕迹
//粒子的运动
//让我们把画布漆成黑色
//但BG油漆不应与前一帧混合
ctx.globalCompositeOperation=“源代码结束”；
//让我们降低BG油漆的不透明度，以提供最终的触感
ctx.fillStyle=“rgba（0,0,0,0.3）”；
ctx.fillRect（0,0,W,H）；
//让我们将粒子与背景混合
ctx.globalCompositeOperation=“打火机”；
//现在让我们从阵列中绘制粒子
对于（var t=0；tW+50）p.x=-50；
如果（p.y>H+50）p.y=-50；
}
}
设置间隔（绘制，33）；
//我希望您喜欢本教程：）

按钮{
位置：相对位置；
}
#提交{
位置：绝对位置；
左：0；
右：0；
最高：15%；
左边距：自动；
右边距：自动；
颜色：白色；
}

提交

按钮元素有填充和边框

将此添加到css中：

button {
 padding: 0px;
 border: 0px;
}

在这种情况下，在某些浏览器的按钮底部还会出现一个小条，因此您可能需要将按钮的高度设置为一个静态数字，如

height:25px

以下是js小提琴：
因为按钮的高度大于画布的高度。此外，还有一些填充以及按钮的边框，不同的浏览器可能会呈现不同的按钮高度，因为您没有为按钮提供任何高度，因此需要使按钮与画布的高度相同，即
高度：25px
并从按钮中删除填充和边框。下面是代码。希望能有帮助


//让我们在HTML5画布和JS中创建一个简单的粒子系统
//初始化画布
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//画布尺寸
var W=500；var H=500；
//让我们创建一个粒子阵列
var粒子=[]；
对于（变量i=0；i<50；i++）
{
//这将向具有随机位置的阵列添加50个粒子
粒子。推（新建创建_粒子（））；
}
//让我们创建一个函数，它将帮助我们创建多个粒子
函数create_particle（）
{
//画布上的任意位置
this.x=Math.random（）*W；
this.y=Math.random（）*H；
//让我们为每个粒子添加随机速度
this.vx=Math.random（）*20-10；
this.vy=Math.random（）*20-10；
//随机颜色
var r=Math.random（）*255>>0；
var g=Math.random（）*255>>0；
var b=Math.random（）*255>>0；
this.color=“rgba（“+r+”，“+g+”，“+b+”，0.5）”；
//随机大小
this.radius=Math.random（）*10+10；
}
var x=100；变量y=100；
//让我们为粒子设置动画
函数绘图（）
{
//移动此BG绘制代码insde draw（）将有助于删除痕迹
//粒子的运动
//让我们把画布漆成黑色
//但BG油漆不应与前一帧混合
ctx.globalCompositeOperation=“源代码结束”；
//让我们降低BG油漆的不透明度，以提供最终的触感
ctx.fillStyle=“rgba（0,0,0,0.3）”；
ctx.fillRect（0,0,W,H）；
//让我们将粒子与背景混合
ctx.globalCompositeOperation=“打火机”；
//现在让我们从阵列中绘制粒子
对于（var t=0；tW+50）p.x=-50；
如果（p.y>H+50）p.y=-50；
}
}
设置间隔（绘制，33）
按钮{
位置：相对位置；
}
钮扣{
填充：0px；
边界：0px；
边际：0px；
高度：25px；
}
#提交{
位置：绝对位置；
左：0；
右：0；
最高：15%；
左边距：自动；
右边距：自动；
颜色：白色；
}

提交
为什么不对齐中心？正如我前面提到的，不同的浏览器有不同的渲染。所以，如果您不提供自己的样式，浏览器将自动调用