我希望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提供答案,而不使用任何库。
答案 0 :(得分:1)
正确设置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';
答案 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你的完成了!