0

以上是我正在尝试新的 HTMl5 画布标签的测试网站。我已经把它剥离了一点，只是为了让相关代码更容易找到。

我遇到的问题是在设置画布的宽度和高度时，我使用 .height 和 .width 方法返回的值大于我试图让它们避免导致画布溢出的 div封装div。

JSbin 链接：

http://jsbin.com/ejivux/13/edit

代码只是以防人们想要它在这里：

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);
4

1 回答 1

1

你canvas有一个 5px 的边框：

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

因此，如果您将width画布的 设置为包含的，div我预计 的总宽度canvas将比 10px 多，div因为两边都有边框。试试这个：

canvas.setAttribute('width', $('#canvasDiv').width()-10);
canvas.setAttribute('height', $('#canvasDiv').height()-10);
于 2013-04-18T17:21:04.327 回答