Html over the Canvas？

Question

有人可以澄清我的一些混淆。

是否有可能在画布顶部有html？我一直在阅读你无法使用Canvas等GUI元素（例如Jquery），但是随后我读到可以在画布上放置HTML，为什么你可以有一个而不是另一个？

我最终想要的是我的画布上方有一个很好的GUI，所以只需要知道什么是可能的，哪些不是。

Answer 1

当然 - 您可以通过使用绝对定位将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> 

在此取例子中，你可以与他们是下方的canvas元素上绘制一条线连接两个定位的div。

Answer 2

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

Answer 3

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

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