Javascript 将div（带边框和填充）悬停在画布元素的中心上方？

我希望

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';

class

按钮

定义如下：

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

显然，将左侧的像素定义为画布的一半是有问题的：文本的宽度是可变的。如果我能找到文本的宽度，我可以将它除以2，然后从当前分配给

left

属性的值中减去它

我试着用一个

绝对位置制作一个
div
，它悬停在画布的正上方，并将所有文本对齐
div
内的
中心，但这也不起作用





请试着用纯JavaScript给出答案，不要使用任何库。
就是我如何解决这个问题的一个例子

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完成
 正确设置
ctx.font
后，使用
ctx.measureText
：

我还建议在CSS中正确使用
边框
，比如
3px纯黑

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';

var ctx=canvas.getContext（“2d”）；
ctx.font=“12pt时代新罗马”//与字体相同；这是我的默认设置
var textSize=ctx.measureText（文本）；
...
div.style.left=0.5*canvas.offsetWidth//画布宽度的一半
+canvas.offsetLeft//plus left位置
-（textSize.width/2）//减去文本宽度的一半
-10//减填充
-3//减去边框大小
+"px",；
您可以使用这一行

div.style.left = (0.5 * canvas.width + canvas.offsetLeft - (div.clientWidth / 2)) + 'px';
div.style.left=（0.5*canvas.width+canvas.offsetLeft-（div.clientWidth/2））+'px'；
高度的等效值，但只有在您将div添加到DOM之后。
我更喜欢函数是动态的，因此不必实际键入填充和边框大小的实际值，而是+1表示
ctx.measureText
。谢谢，我注意到了我的例子中的拼写错误。。在小提琴上也一样
foo.style.left=offsetY…
应该是
foo.style.left=offsetX