将div(带边框和填充)悬停在画布元素的中心上?

时间:2011-11-15 13:55:42

标签: javascript css html5-canvas

我希望div水平位于中心。我试过这个:

var div = document.createElement();
div.textContent = 'Hello World!';
div.className = 'button';
div.style.position = 'absolute';
div.style.left = (0.5 * canvas.width) + canvas.offsetLeft + 'px';

班级button的定义如下:

.button{
    color : black;
    padding : 10px;
    border : solid black 3px;
    border-radius : 10px;
    overflow : none;
}

显然,将左边的像素定义为画布的一半是个问题:文本的宽度可变。如果我能找到文本的宽度,我可以将它除以2并将其从我当前赋予left属性的内容中减去。

我尝试过div一个absolute位置,它位于画布正上方,并将所有文字与center内的div对齐,但是这也没用。

请尝试使用普通JavaScript提供答案,而不使用任何库。

3 个答案:

答案 0 :(得分:1)

正确设置ctx.measureText后使用ctx.fonthttp://jsfiddle.net/SFR82/2/

我还建议您正确使用CSS中的border,例如3px solid black

var ctx = canvas.getContext("2d");

ctx.font = "12pt Times New Roman"; // same as <div> font; this is default for me

var textSize = ctx.measureText(text);

...

div.style.left = 0.5 * canvas.offsetWidth // half canvas width
    + canvas.offsetLeft                   // plus left position
    - (textSize.width / 2)                // minus half of text width
    - 10                                  // minus padding
    - 3                                   // minus border size
    + 'px';

答案 1 :(得分:1)

您可以使用此行

div.style.left = (0.5 * canvas.width + canvas.offsetLeft - (div.clientWidth / 2)) + 'px';

和高度的等价物,但只有在你将div添加到DOM之后。

答案 2 :(得分:0)

here是我如何解决问题的一个例子。

var cvsHeight = cvs.height,
    cvsWidth = cvs.width;

var foo = document.getElementById("foo");
var offsetX = cvs.offsetLeft,
    offsetY = cvs.offsetTop;

foo.style.top = offsetY + (cvsHeight / 2) - (foo.offsetHeight / 2) + "px";
foo.style.left = offsetX + (cvsWidth / 2) - (foo.offsetWidth / 2) + "px";

基本上你取浮动物体的高度和宽度的一半,然后从画布的高度和宽度的一半减去...然后加上x和y偏移(画布位于页面上)和BAM你的完成了!