캔버스 내부에 단추 넣기

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>

감사합니다! 이 일을

당신은 캔버스에 둥지 요소 만 CSS로 버튼을 그릴 수 없습니다

출처

2014-12-17 The Good Guy

문제가 무엇입니까 (캔버스 버튼보다 낮은 Z- 인덱스가 있어야합니다)? –

조금 더 많은 컨텍스트를 추가 할 수 있습니까? 작동하지 않는 것은 무엇입니까? 너 뭐 해봤 니? – smac89

버튼이 내가 만든 캔버스 안에 있지 않습니다. 그 대신에 나는 –

...

// 간단한 방법은 TO [.myButton]

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

-Class 이러한 속성을 추가

HTML5를 사용하고 !DOCTYPE을 선언하는 경우 더 이상 사용되지 않으므로 <center> 태그를 사용하지 않아야한다고 덧붙일 수도 있습니다.

출처

2014-12-17 03:50:27

<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> START 게임

캔버스 아래에있는 버튼을 넣어 각각 Z- 인덱스를 제공합니다.

출처

2014-12-17 03:52:36

캔버스 내부에 단추 넣기

답변

관련 문제