web-dev-qa-db-ja.com

キャンバス内にHTMLボタンを配置できますか？

作成しているゲームのボタンを実際のHTMLボタンとして作成したいのですが、キャンバス内に配置する必要があります。

これをどうやってやるの？

javascripthtmlcsshtml5canvas
33
CyanPrime

canvas element に transparent content model がある場合、イベントに表示されるfallback要素を含めることができますcanvas要素がサポートされていないこと。キャンバスisがサポートされている場合、notは表示されません。

キャンバスの親に対してHTML要素を配置して、キャンバス上でボタンを「ホバリング」することができます。 メニュー要素 は、コンテキストに応じて、コントロールのリストを表示する適切なセマンティック要素になります。

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%;
}
43
zzzzBov

ボタンの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は数字です。

10
Alex

キャンバス内でHTMLを使用することはできませんが、エレメントをキャンバス上に「浮かせる」ように絶対的に配置することはできますが、キャンバス内ではできません。

4
sidyll

Canvasタグ内にHTMLコンテンツを「入れる」ことができるとは思わない。ブラウザにdoes n't support <canvas>。

ただし、ボタンをキャンバスの真上に配置したり、ボタンのように見えて自分でイベントを処理するキャンバス内の領域をレンダリングすることはできます（多くの作業）。

4
Paul Spencer

キャンバスの上部にボタンを動的に追加する1つの方法は、次の2つのポイントに従うことです。

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

HTML：

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

CSS：

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

JavaScript：

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');
});
2
Razan Paul

キャンバス内のHTMLは使用できません。
しかし、本当にボタンを使用したい場合は、なぜキャンバスの上部にボタンを配置してみませんか？

0
gion_13

キャンバス内にHTMLボタンまたはメニューを配置するには、my DropdownMen を使用できます。

例 コード：

<div class="container" id="containerDSE">
    <canvas id="canvas"></canvas>
</div>
<script>
var elContainer = document.getElementById( "containerDSE" ),
elCanvas = elContainer.querySelector( 'canvas' );

dropdownMenu.create( [

    {

        name: 'Button',
        onclick: function ( event ) {

            var message = 'Button onclick';
            //console.log( message );
            alert( message )

        },

    },

], {

    elParent: elContainer,
    canvas: elCanvas,
    decorations: 'Transparent',

} );
</script>

例 使用中。

0
Andrej

Canvateライブラリを使用して、キャンバス内にボタン（png、jpg、svg、およびテキスト）を配置できます。 http://www.sakuracode.com/canvate

これは、キャンバス内のドラッグボタンのサンプルです。

container.startDrag();

https://codepen.io/EiseiKashi/pen/BxNbmj

0
Eese