2011-01-25 37 views

答えて

39

canvas elementtransparent 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%; 
} 
+0

'menu'を使う必要はありません。この方法でキャンバス上のほぼすべてのHTML要素を表示できます。 –

+3

@ peci1、私は ''を選択しましたが、それは意味的であったため、このケースでは ''に関して特別なことはしませんでした。 – zzzzBov

4

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

+2

それは今、ここに私の答えのhttpを参照してくださいています。com/a/12464988/575501 – cburgmer

4

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

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

+3

あなたはキャンバスの中に何を入れても意味します_element_(タグではありません;) – kangax

+0

kangaxは正しいです、私はより明確にする必要があります! –

0

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

8

キャンバスボタンの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"/> 

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

+1

これはchromeで動作することが判明しましたが、firefoxではキャンバスに負のz-indexを与えなければなりませんでした。 – skorulis

2

一つの方法は、次の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'); 
}); 
関連する問題