画布上的Html？

Question

有人能澄清我的一些困惑吗？

有可能在画布的顶部有html吗？我一直在读，你不能有GUI元素，比如带画布的Jquery，但是我读到你可以在画布上有HTML，为什么你可以有一个却没有另一个？

理想情况下，我最终想要的是在画布顶部有一个好的GUI，所以只需要知道什么是可能的，什么是不可能的。

Answer 1

您可以使用position:absolute将元素放置在画布上方用于需要放置在画布上方的任何HTML元素。希望这有帮助。

Answer 2

canvas元素与任何其他dom元素没有区别，因此可以将任何dom元素放置在canvas元素的顶部。

jQuery只是操作DOM的一种手段，因此当然可以将jQuery用于GUI。你不能做的是使用jQuery来操作画布本身的内容（像素数据），也许这就是混乱的原因。

Answer 3

当然-您可以使用绝对定位将HTML放在画布的“顶部”。

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

画布中不能有HTML。但是假设画布和HTML使用相同的坐标，那么您可以使用top和left在画布中使用与绘制相同的偏移来定位元素。

#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>

在这个抓取示例中，您可以将两个定位的div连接到它们下面的canvas元素上绘制的一条线。