Startscreen on Javascript游戏/可点击播放按钮 我正在为我的JavaScript突破游戏制作一个开始屏幕。我（拙劣地）制作了背景和播放按钮

背景在画布内，我想要。但是当我想把可点击播放按钮放在画布背景的顶部时，它就消失了。我试着制作另一张图片，我可以把它放在桌面上，我就是不能让它点击

我不知道最好的解决方案是什么，我对JavaScript非常陌生

//Script
var background = new Image();
    background.src="breakoutbg.png";
var play = new Image();
    play.src="breaoutplay.png";

var startBtn = document.getElementById('startBtn');

//game
function drawCanvas() {
    ctx.beginPath();
    ctx.drawImage(background,0,0);
    ctx.fill();
    ctx.closePath();

}

function drawPlay() {
    ctx.beginPath();
    ctx.drawImage(play,250,250);
    ctx.fill();clickable;
    ctx.closePath();
}

<div id="container">
    <button type="button" id="startBtn" onclick="draw()" >
        <img src="breaoutplay.png">
    </button>
     <canvas id="myCanvas" width="600" height="550"></canvas>
</div>

//脚本
var background=新图像（）；
background.src=“breakoutbg.png”；
var play=新图像（）；
play.src=“breaoupplay.png”；
var startBtn=document.getElementById（'startBtn'）；
//游戏
函数drawCanvas（）{
ctx.beginPath（）；
ctx.drawImage（背景，0,0）；
ctx.fill（）；
ctx.closePath（）；
}
函数drawPlay（）{
ctx.beginPath（）；
ctx.drawImage（播放，250250）；
ctx.fill（）；可单击；
ctx.closePath（）；
}

我不知道我是否给出了足够的代码，以便有人对此有所了解。整个代码都在github上：

将其添加到您的CSS中

#container {
  display: inline-block;
  position: relative;
}            
#startBtn {
  border: none;
  background: none;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

上面的代码将把按钮放在画布中央。 同时添加

z-索引：1到按钮，将其放置在画布上



身体{
背景色：黑色；
}          
* {
填充：0；
保证金：0；
}          
帆布{
背景：353d49；
显示：块；
利润率：100像素；
}          
#开始{
边界：无；
背景：无；
位置：绝对位置；
最高：50%；
左：50%；
z指数：1；
转换：翻译（-50%，-50%）；
-webkit转换：翻译（-50%，-50%）；
-moz变换：平移（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
}          
#容器{
显示：内联块；
位置：相对位置；
}          
#我的画布{
位置：相对位置；
}
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
var-ballRadius=9；
var x=canvas.width-Math.floor（Math.random（）*600）
变量y=画布高度-30；
var-dx=5；
var-dy=-4；
高度=10；
宽度=75；
var-pallex=（canvas.width-pallewidth）/2；
var-rightspressed=false；
var leftPressed=false；
var brickRowCount=7；
var brickColumnCount=5；
var brickWidth=75；
var brickHeight=20；
var=4；
var brickOffsetTop=30；
var brickOffsetLeft=30；
var得分=0；
var=3；
var background=新图像（）；
background.src=”https://1.bp.blogspot.com/-hs2fckXJBkE/W5obuBm9kII/AAAAAAAAB38/C89KFBJCIlEwfl-g8d-T1Cu4cHFWjYI2QCLcBGAs/s1600/breakoutbg.png";
var play=新图像（）；
play.src=”https://1.bp.blogspot.com/-fVAKH-3TLuo/W5onDDHje0I/AAAAAAAAB4I/q2ooE6GuzQkS80dtw1JILXjFWdfQ3IKkwCLcBGAs/s1600/breaoutplay.png";
var startBtn=document.getElementById（'startBtn'）；
//游戏
函数drawCanvas（）{
ctx.beginPath（）；
ctx.drawImage（背景，0,0）；
ctx.fill（）；
ctx.closePath（）；
}
函数drawPlay（）{
ctx.beginPath（）；
ctx.drawImage（play，250250）；
ctx.fill（）；
可点击；
ctx.closePath（）；
}
函数newBrick（）{
返回{
x:0,，
y:0，
现状：1
};
}
var=[]；
对于（var c=0；c0&&relativeXb.x&&xb.y&&y