キャンバス要素の中央にdiv（ボーダーとパディング付き）を配置しますか？

Question

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にすべてのテキストを揃える試してみたが、それはどちらか動作しませんでした。

• First attempt
• Second attempt

任意のライブラリを使用せず、平野JavaScriptであなたの答えを与えることをしてみてください。

Answer 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で完了！

Answer 2

ctx.fontを正しく設定した後、ctx.measureTextを使用してください。http://jsfiddle.net/SFR82/2/。

3px solid blackのように、CSSで正しくborderを使用することをおすすめします。

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

Answer 3

あなたはいますが、DOMへのdivを追加した後にのみ、このライン

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

と高さのための同等のものを使用することができます。