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（）*20+20；
}
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）；
//我希望您喜欢本教程：）

提交

您需要指定画布的大小。您可以通过属性将画布的宽度和高度设置为固定值，即

。图形受宽度和高度变量的约束，您可能也希望修改这些变量。至于文本，需要使用绝对定位将其定位在画布顶部。或者，您可以直接在画布上绘制文本。请注意，您可以使用不带按钮的画布，然后在画布上注册单击事件处理程序来模拟按钮

---

像这样吗？@Mi：是的！非常感谢。另外，将padding、margin和border设置为0。欢迎使用，喜欢编码。我可以让画布占据按钮上的全部空间吗？按钮没有应用宽度和高度。因此，按钮的宽度和高度将与子内容的宽度和高度相匹配。在这种情况下，它将匹配画布的尺寸（减去填充）-