画布上的Html？

Question

有人可以解决我的一些困惑.

是否可以将html放在画布的顶部？我一直在读你不能拥有像Canqu的Jquery这样的GUI元素,但是后来我读到你可以在画布上有HTML,为什么你有一个而不是另一个？

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

Answer 1

当然 - 您可以使用绝对定位将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,并在其下方的画布元素上绘制一条线.

Answer 2

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

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