Html na płótnie?

Question

Czy ktoś może wyjaśnić pewne zamieszanie z mojej strony.

Czy jest możliwe umieszczenie html na górze płótna? Ciągle czytam, że nie możesz mieć elementów GUI, takich jak Jquery z Canvas, ale potem czytam, że możesz mieć HTML na płótnie, dlaczego możesz mieć jeden, ale nie drugi?

To, czego chcę, to w końcu dobry GUI na górze mojego płótna, więc wystarczy wiedzieć, co jest możliwe, a co nie.

Answer 1

Oczywiście - możesz umieścić HTML "na wierzchu" płótna, używając bezwzględnego pozycjonowania.

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

Nie można mieć HTML "na" płótnie. Ale zakładając, że płótno i HTML używają tych samych współrzędnych, możesz użyć górnego i lewego, by pozycjonować elementy w obszarze roboczym, używając tych samych przesunięć, co podczas rysowania.

#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(); 

I HTML ...

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

W tym sprowadzania przykład można połączyć dwa umieszczone div z linią poprowadzoną na elemencie canvas, który jest pod nimi.

Answer 2

Możesz umieścić element powyżej płótna z position:absolute; dla dowolnego elementu HTML, który musisz umieścić nad obrazem. Mam nadzieję że to pomoże.

Answer 3

Element canvas nie różni się od innego elementu dom, więc możesz umieścić dowolny element dom na wierzchu elementu canvas.

jQuery jest tylko środkiem do manipulować DOM, więc oczywiście można użyć jQuery dla GUI. Czego nie możesz zrobić, to użyć jQuery do manipulowania zawartością samego płótna (danych pikseli), może właśnie o to chodzi w zamieszaniu.