キャンバス内にHTMLボタンを置くことはできますか？

Question

私は実際のHTMLボタンとして作っているゲームのボタンを作っていますが、キャンバスの内側にする必要があります。

どうすればいいですか？

Answer 1

はcanvas elementがtransparent content modelを有し、それはcanvas要素がサポート対象外である場合に表示される代替要素を含むことができることを考えます。キャンバスがの場合、は表示されず、と表示されます。

キャンバスの親を基準にしてHTML要素を配置すると、ボタンをキャンバス上に「ホバリング」させることができます。 menu elementは、コンテキストに応じて、コントロールのリストをレンダリングするために適切なセマンティック要素が考えられます。

_HTML：

<div id="container"> 
    <canvas id="viewport"> 
    </canvas> 
    <menu id="controls"> 
    </menu> 
</div> 

_CSS：

#container 
{ 
    height: 400px; 
    position: relative; 
    width: 400px; 
} 
#viewport 
{ 
    height: 100%; 
    width: 100%; 
} 
#controls 
{ 
    bottom: 0; 
    left: 0; 
    position: absolute; 
    width: 100%; 
} 

Answer 2

HTMLはキャンバス内にはありませんが、キャンバス上に「浮動」するように要素を配置することは可能ですが、その内部には配置できません。

Answer 3

キャンバスタグ内にHTMLコンテンツを配置することはできません。 がのサポート<canvas>でない場合は、実際に表示されます。

しかし、あなたのボタンをキャンバスの上に置いたり、キャンバスの中にボタンのように見えるようにレンダリングしたり、自分でイベントを処理することができます（多くの作業）。

Answer 4

HTMLキャンバスの内側には不可能です。
ボタンを本当に使いたい場合は、キャンバスの上にボタンを配置してみてください。

Answer 5

キャンバスボタンのz-indexより低いz-indexを与えることによってcanvasの上にボタンを配置することができます

<canvas style="z-index:1"></canvas> 
<input type="button" style="z-index:2; position:absolute; top:x; left:y" value="test"/> 

どこxとyは数字です。キャンバス上に動的にボタンを追加する

Answer 6

一つの方法は、次の2点を以下れる： 1は、所望の上部と左側値で絶対位置を使用してキャンバス 2ポジションボタンより高いボタンでのZIndexを作る

Jsfiddle：https://jsfiddle.net/n2EYw/398/

HTML：

<canvas id="canvas" width="200" height="200">   
</canvas> 

CSS：

canvas { 
    border: 1px dotted black; 
    background: navy; 
} 

JavaScriptが：// stackoverflowの：

var $testButton = $('<input/>').attr({ 
    type: 'button', 
    name: 'btn1', 
    value: 'TestButton', 
    id: 'testButton', 
    style: 'position:absolute; top:50px;left:100px; zindex:2' 
}); 
$('body').append($testButton); 
$(document).on("click", "#testButton", function() { 
    alert('button clicked'); 
});