将 div（带有边框和填充）悬停在画布元素的中心？答案

【问题标题】：Hover div (with a border and padding) over the center of a canvas element?将 div（带有边框和填充）悬停在画布元素的中心？
【发布时间】：2011-12-29 13:27:15
【问题描述】：

我希望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 属性的值中减去它。

我尝试只创建一个带有absolute 位置的div，它悬停在画布的正上方并将所有文本与div 中的center 对齐，但这也不起作用。

请尝试在不使用任何库的情况下使用纯 JavaScript 给出您的答案。

【问题讨论】：

标签： javascript css html5-canvas

【解决方案1】：

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 你的完成！

【讨论】：

刚刚注意到我的例子中有错字......在小提琴中也是如此。 foo.style.left = offsetY ... 应该是 foo.style.left = offsetX

【解决方案2】：

使用ctx.measureText，正确设置ctx.font后：http://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';

【讨论】：

我更希望函数是动态的，因此不必实际输入填充和边框大小的实际值，而是为ctx.measureText 输入 +1。谢谢

【解决方案3】：

你可以用这条线

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

和高度的等价物，但仅在您将 div 添加到 DOM 之后。

【讨论】：