Html在画布上？ [英] Html over the Canvas?

问题描述

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

有可能在画布的顶部有html吗？我继续阅读，你不能有GUI元素，如Jquery与Canvas，但后来我读你可以有HTML在画布上，为什么你可以有一个，但不是其他？

$ b $

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

当然 - 你可以通过使用绝对定位将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 =canvaswidth =500height =500> 
< / canvas> 
< div class =blob1>< / div> 
< div class =blob2>< / div> 
< / div> 
 

在此获取示例中，您可以连接两个定位的div，并在下面的canvas元素上绘制一条线

Can someone clear up some some confusion on my part.

Is it possible to have html over the top of a canvas? I keep reading that you can't have GUI elements such as Jquery with Canvas, but then I read you can have HTML over the canvas, why can you have one but not the other?

What I ideally want eventually is a good GUI over the top of my canvas, so just need to know what's possible and what isn't.

解决方案

Sure - you can put the HTML "on top" of the canvas by using absolute positioning.

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

You cannot have HTML "in" the canvas. But supposing that the canvas and the HTML use the same coordinates then you can use top and left to position elements in the canvas using the same offsets as you draw with.

#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();

And the HTML...

<div id="picture">
    <canvas id="canvas" width="500" height="500">
    </canvas>
    <div class="blob1"></div>
    <div class="blob2"></div>
</div>

In this fetching example you can connect two positioned divs with a line drawn on a canvas element that is underneath them.

这篇关于Html在画布上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！