Может кто-то прояснить некоторую путаницу с моей стороны.
Возможно ли иметь html поверх холста? Я продолжаю читать, что у вас не могут быть элементы GUI, такие как JQuery с Canvas, но тогда я читал, что вы можете иметь HTML-образ поверх холста, почему у вас есть один, но не другой?
В идеале я хочу, чтобы в конечном итоге был хороший графический интерфейс поверх верхней части моего холста, поэтому просто нужно знать, что возможно, а что нет.
Конечно - вы можете поместить HTML "сверху" на холст, используя абсолютное позиционирование.
http://jsfiddle.net/stevendwood/5sSWj/
У вас не может быть HTML "в" холсте. Но предположим, что холст и HTML используют одни и те же координаты, тогда вы можете использовать верхний и левый элементы для позиционирования элементов на холсте, используя те же смещения, которые вы рисуете с помощью.
#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();
И HTML...
<div id="picture">
<canvas id="canvas" width="500" height="500">
</canvas>
<div class="blob1"></div>
<div class="blob2"></div>
</div>
В этом примере выборки вы можете соединить два позиционированных divs с линией, нарисованной на элементе canvas, который находится под ними.
Элемент canvas ничем не отличается от любого другого элемента dom, поэтому вы можете поместить любой элемент dom поверх элемента canvas.
jQuery - это просто средство манипулирования DOM, поэтому, конечно, вы можете использовать jQuery для графического интерфейса. То, что вы не можете сделать, это использовать jQuery для управления содержимым самого холста (данные пикселя), возможно, что это путаница.
Вы можете поместить элемент выше холста с помощью position:absolute; для любого элемента HTML, который нужно разместить над холстом. Надеюсь, это поможет.