18

有人可以澄清我的一些困惑。

是否可以在画布顶部放置 html？我一直在读到你不能有 GUI 元素，比如带有 Canvas 的 Jquery，但后来我读到你可以在画布上拥有 HTML，为什么你可以有一个但不能有另一个？

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

4

3 回答 3

20

当然 - 您可以使用绝对定位将 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 与在它们下方的画布元素上绘制的线连接起来。

于 2013-05-16T12:15:38.597 回答
5

canvas 元素与任何其他 dom 元素没有什么不同，因此您可以将任何 dom 元素放置在 canvas 元素之上。

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

于 2013-05-16T12:06:18.020 回答
4

您可以在画布上方放置一个元素，其中position:absolute;包含您需要放置在画布上方的任何 HTML 元素。希望这可以帮助。

于 2013-05-16T12:06:09.740 回答