Html über die Leinwand?

Kann jemand Aufräumen einige Verwirrung auf meinem Teil.

Ist es möglich, html über der Oberseite von einer Leinwand? Immer wieder lese ich, dass Sie nicht haben, können GUI-Elemente wie z.B. Jquery mit Leinwand, aber dann habe ich gelesen man kann HTML über die Leinwand, warum können Sie haben eine aber das andere nicht?

Was ich idealerweise wollen, schließlich ist eine gute GUI über den Rand meiner Leinwand, so müssen nur wissen, was möglich ist und was nicht.

InformationsquelleAutor Phil | 2013-05-16

  1. 17

    Sicher - Sie können die HTML - "on top" von der Leinwand mithilfe von absoluter Positionierung.

    http://jsfiddle.net/stevendwood/5sSWj/

    Können Sie nicht haben HTML "in" der Leinwand. Aber angenommen, die Leinwand und die HTML verwenden Sie die gleichen Koordinaten dann können Sie mit top und left zur Positionierung von Elementen im canvas-Bereich mit den gleichen offsets wie Sie zeichnen kann.

    #picture {
    position: relative;
}

.blob, .blob1, .blob2 {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 20px;
    background-color: green;
    border: 2px solid #ccc;
}


var canvas = document.querySelector('canvas'),
    context = canvas.getContext('2d');

context.beginPath();
context.moveTo(100, 150);
context.lineTo(350, 50);
context.stroke();

    Und HTML...

    <div id="picture">
    <canvas id="canvas" width="500" height="500">
    </canvas>
    <div class="blob1"></div>
    <div class="blob2"></div>
</div>

    In diesem fetching Beispiel können Sie verbinden zwei positionierte divs mit der eine Linie gezeichnet wird auf ein canvas-element, ist unter Ihnen.

    nur um zu klären sein Antworten, können Sie nicht so etwas wie dieses: <canvas id="canvas" width="500" height="500"><h1>nicht möglich</h1></canvas>

    InformationsquelleAutor Woody

  2. 3

    Kann ein element über die Leinwand mit position:absolute; für jedes HTML-element, das Sie benötigen, um über die Leinwand. Hoffe, das hilft.

    InformationsquelleAutor Nitesh

  3. 3

    Das canvas-element ist nicht anders als jedes andere dom-element, so dass Sie können jedes dom-element, das oben auf einem canvas-element.

    jQuery ist nur ein Mittel, um manipulieren der DOM, so kann man natürlich jQuery verwenden für die GUI. Was Sie nicht tun können, ist die Verwendung von jQuery zu manipulieren den Inhalt des canvas selbst (die pixel-Daten), vielleicht ist das, was die Verwirrung über.

    InformationsquelleAutor Strille

Schreibe einen Kommentar