Question

我在html中创建了一个按钮并在CSS中给它一个样式，我想把那个按钮放到我的画布上。

这是我的Code

<!DOCTYPE html>

<html>
<head>
    <title>Start Game</title>
</head>

<body>
    <center>
      <canvas id="canvas" width="1000" height="800" style="border:5px solid black"></canvas>
      <a href="Game/index.html" class="myButton">START GAME</a>
      <style>

          .myButton {
              -moz-box-shadow: 0px 10px 14px -7px #276873;
              -webkit-box-shadow: 0px 10px 14px -7px #276873;
              box-shadow: 0px 10px 14px -7px #276873;
              background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #599bb3), color-stop(1, #408c99));
              background:-moz-linear-gradient(top, #599bb3 5%, #408c99 100%);
              background:-webkit-linear-gradient(top, #599bb3 5%, #408c99 100%);
              background:-o-linear-gradient(top, #599bb3 5%, #408c99 100%);
              background:-ms-linear-gradient(top, #599bb3 5%, #408c99 100%);
              background:linear-gradient(to bottom, #599bb3 5%, #408c99 100%);
              filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bb3', endColorstr='#408c99',GradientType=0);
              background-color:#599bb3;
              -moz-border-radius:8px;
              -webkit-border-radius:8px;
              border-radius:8px;
              display:inline-block;
              cursor:pointer;
              color:#ffffff;
              font-family:arial;
              font-size:20px;
              font-weight:bold;
              padding:13px 32px;
              text-decoration:none;
              text-shadow:0px 1px 0px #3d768a;
          }
          .myButton:hover {
              background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #408c99), color-stop(1, #599bb3));
              background:-moz-linear-gradient(top, #408c99 5%, #599bb3 100%);
              background:-webkit-linear-gradient(top, #408c99 5%, #599bb3 100%);
              background:-o-linear-gradient(top, #408c99 5%, #599bb3 100%);
              background:-ms-linear-gradient(top, #408c99 5%, #599bb3 100%);
              background:linear-gradient(to bottom, #408c99 5%, #599bb3 100%);
              filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#408c99', endColorstr='#599bb3',GradientType=0);
              background-color:#408c99;
          }
          .myButton:active {
              position:relative;
              top:1px;
          }

      </style>
    </center>

</body>
</html>

提前致谢！

Answer 1

您无法在画布中嵌套元素，只能使用CSS绘制按钮...

//这样做的简单方法是将这些属性添加到[.myButton] -class

position: absolute;
top: 45%;
left: calc(47%);

我还可以补充一点，如果您使用HTML5并声明!DOCTYPE，则不应使用<center>标记，因为它已被弃用。

Answer 2

<canvas style="z-index:1" id="canvas" width="1000" height="800" style="border:5px solid black"></canvas> <button class="myButton" style="z-index:2"> <a href="Game/index.html" class="myButton">START GAME</a></button> 开始游戏

将按钮放在画布下，并为每个按钮指定z-index。（画布的z-index应低于按钮）

Answer 3

我做了一个库，可以让按钮放在Canvas中，还有更多东西。请检查出来：http://www.sakuracode.com/canvate 在这里，您可以使用简单的拖动按钮来更改画布内按钮的颜色和文本。您也可以为文本添加样式。

        container.startDrag();
        container.setPivot(0.5, 0.5);
        container.addEventListener("drag", onDrag);
        container.addEventListener("drop", onDrop);

Codepen

如果您有任何疑问，请告诉我们！

把按钮放在画布里面

3 个答案: