javascript – 在画布上的Html？

有人可以清除我的一些混乱.

是否有可能在画布顶部有html？我继续阅读,你不能有GUI元素,如Jquery与Canvas,但后来我看到你可以有HTML在画布上,为什么你可以有一个,但不是另一个？

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

解决方法

当然 – 您可以使用绝对定位将HTML“顶部”放在画布上.

您不能在画布中显示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>

在这个提取示例中,您可以将两个定位的div连接到在其下方的canvas元素上绘制的线.

javascript – 在画布上的Html？

解决方法

相关文章