使Javascript代码在单击按钮时工作

我如何在点击按钮并禁用自动启动时使其工作

canvas=document.getElementById（“canvas”）；
context=canvas.getContext（“2d”）；
宽度=canvas.width=window.innerWidth；
高度=canvas.height=window.innerHeight；
//画面装饰
粒子=[]；
particleCount=0，
重力=0.1，
颜色=[
"f44336","e91e63","9c27b0","673ab7","3f51b5",，
"2196f3","03a9f4","00bcd4","009688","4CAF50",，
"8BC34A","CDDC39","FFEB3B","FFC107","FF9800",，
"FF5722","795548"
];
对于（变量i=0；i<90；i++）{
粒子推({
x：宽度/2，
y:高度/2，
boxW：随机范围（5,20），
框H：随机范围（5,20），
大小：随机范围（2,8），
spikeran：随机范围（3,5），
velX：随机范围（-8,8），
随机范围（-50，-10），
角度：转换器半径（随机范围（0,360）），
颜色：颜色[Math.floor（Math.random（）*colors.length）]，
角度旋转：随机范围（-0.2,0.2），
绘图：函数（）{
context.save（）；
翻译（this.x，this.y）；
旋转（这个角度）；
context.fillStyle=this.color；
context.beginPath（）；
//drawStar（0,0,5，this.boxW，this.boxH）；
context.fillRect(
this.boxW/2*-1，this.boxH/2*-1，
这个.boxW，这个.boxH
);
context.fill（）；
closePath（）；
restore（）；
this.angle+=this.anglespin；
该系数=0.999；
该值为±0.2；
this.x+=this.velX；
this.y+=this.y；
如果（此.y<0）{
该系数为*=-0.2；
该值=0.9；
};
如果（此.y>高度）{
这个角自旋=0；
y=高度；
该系数为*=-0.2；
该值=0.9；
};
if（this.x>宽度| | this.x<0）{
这是0.velX*=-0.5；
};
},
});
}
r1={
x：宽度/2-150，
y：高度/2-150，
宽度：300，
身高：300，
velX:0，
男：10，
img:loadImage(
"http://image.noelshack.com/fichiers/2015/12/1427051642-smiley.png"
),
alphatop:0
};
函数drawScreen（）{
尺寸=50；
pFontName=“Lucida Sans Unicode”；
context.font=size+“pt”+pFontName；
context.fillText（“五彩纸屑派对！！！”，宽度/2150）；
如果（r1.alphatop<1）{
r1.alphatop+=0.01；
}否则{
r1.alphatop=1；
}
context.globalAlpha=r1.alphatop；
drawImage（r1.img，r1.x，r1.y）；
context.textAlign='center'；
如果（r1.alphatop==1）{
r1.1*=0.999；
r1.1+=0.3；
r1.x+=r1.x；
r1.y+=r1.5；
}
如果（r1.y+r1.height>height）{
r1.1=0；
r1.y=高度-r1.高度；
r1.1*=-0.8；
r1.velX*=0.9；
};
context.globalAlpha=1；
对于（var i=0；i

html，正文{
填充：0；
保证金：0；
背景图片：url(
"http://image.noelshack.com/fichiers/2015/12/1427051641-geometry.png"
);
宽度：100%；
身高：100%；
光标：默认值；文本对齐：居中；
字体系列：“PT Sans”，无衬线；
}
帆布{
位置：绝对位置；
左：0；
排名：0；
z指数：0；
边框：0px实心#000；
}

---

将代码包装到函数中，然后添加一个调用该函数的按钮

函数RunIt（）{
canvas=document.getElementById（“canvas”）；
context=canvas.getContext（“2d”）；
宽度=canvas.width=window.innerWidth；
高度=canvas.height=window.innerHeight；
//画面装饰
粒子=[]；
particleCount=0，
重力=0.1，
颜色=[
"f44336","e91e63","9c27b0","673ab7","3f51b5",，
"2196f3","03a9f4","00bcd4","009688","4CAF50",，
"8BC34A","CDDC39","FFEB3B","FFC107","FF9800",，
"FF5722","795548"
];
对于（变量i=0；i<90；i++）{
粒子推({
x：宽度/2，
y:高度/2，
boxW：随机范围（5,20），
框H：随机范围（5,20），
大小：随机范围（2,8），
spikeran：随机范围（3,5），
velX：随机范围（-8,8），
随机范围（-50，-10），
角度：转换器半径（随机范围（0,360）），
颜色：颜色[Math.floor（Math.random（）*colors.length）]，
角度旋转：随机范围（-0.2,0.2），
绘图：函数（）{
context.save（）；
翻译（this.x，this.y）；
旋转（这个角度）；
context.fillStyle=this.color；
context.beginPath（）；
//drawStar（0,0,5，this.boxW，this.boxH）；
context.fillRect（this.boxW/2*-1，this.boxH/2*-1，this.boxW，this.boxH）；
context.fill（）；
closePath（）；
restore（）；
this.angle+=this.anglespin；
该系数=0.999；
该值为±0.2；
this.x+=this.velX；
this.y+=this.y；
如果（此.y<0）{
该系数为*=-0.2；
该值=0.9；
};
如果（此.y>高度）{
这个角自旋=0；