Question

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

我遇到的问题是在设置画布的宽度和高度时，使用.height和.width方法返回的值大于我试图让它们从画布中获取的值超出封装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);

Answer 1

您的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);

.height / div的宽度将不同的值返回到画布中

1 个答案: