。高度/宽度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将不同的值返回到画布

回答

相关问题