。高度/寬度div將不同的值返回到畫布

上面是一個測試網站，我正在試用新的HTMl5畫布標籤。爲了使相關的代碼更易於定位，我已經將它簡化了一些。。高度/寬度div將不同的值返回到畫布

我遇到的問題是當設置畫布的寬度和高度時，我用.height和.width方法得到的值比div大，我試圖讓它們導致畫布來溢出封裝的div。

鏈接JSbin：

代碼只是櫃麪人們想在這裏：

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <meta charset=utf-8 /> 
    <title>JS Bin</title> 
    </head> 
    <body> 
    <div id="container"> 

    <div id="leftColumn"> 

     text 

     </div> 

     <div id="rightColumn"> 

     </div> 

    </div> 
    </body> 
</html>

CSS：

canvas{ 
    border-width:5px; 
    border-style:solid; 
} 

html{ 
    height:99%; 
    background-color:red; 
} 

body{ 
    height:99%; 
    background-color:blue; 
} 

#container{ 
    background-color:yellow; 
    min-width:976px; 
    min-height:99%; 
    height:100%; 
} 

#leftColumn{ 
    background-color:pink; 
    width:50%; 
    min-height:100%; 
    height:100; 
    float:left; 
} 

#rightColumn{ 
    background-color:green; 
    width:50%; 
    min-height:100%; 
    height:100%; 
    float:left; 
}

個JS：

var canvasDiv = document.getElementById('rightColumn'); 
canvas = document.createElement('canvas'); 
canvas.setAttribute('width', $('#rightColumn').width()); 
canvas.setAttribute('height', $('#rightColumn').height()); 
canvas.setAttribute('id', 'canvas'); 
canvasDiv.appendChild(canvas);

來源

2013-04-18 Edward Moss

你canvas有5px的邊框：

canvas{ 
    border-width:5px; 
    border-style:solid; 
}

所以，如果你設置畫布的width到含有div的我期望canvas的總寬度是由於兩邊的邊界，比div多10px。嘗試this：

canvas.setAttribute('width', $('#canvasDiv').width()-10); 
canvas.setAttribute('height', $('#canvasDiv').height()-10);

來源

2013-04-18 17:21:04 robertc

當你擁有的那些日子......在這裏你盯着幾個小時，一些基本的逃生你的屏幕一個你知道......這是那些日子嗎？。感謝讓我感覺像個白癡^^ –

。高度/寬度div將不同的值返回到畫布

回答

相關問題