Javascript 调整浏览器大小后如何获取画布的宽度和高度

我想得到画布的宽度和高度，这是响应。我在一个页面上有5个画布元素

在绘图之前使用Javascript，我想知道画布的高度和宽度，以便能够以正确的大小绘制图像

HTML代码：

<div id='container'>
  <div class='all'>
    <canvas id='clock1' style="border:solid">
  </div>
  <div class='all'>
    <canvas id='clock2' style="border:solid">
  </div>
  <div class='all'>
    <canvas id='clock3' style="border:solid">
  </div>
  <div class='all'>
    <canvas id='clock4' style="border:solid">
  </div>
  <div class='all'>
    <canvas id='clock5' style="border:solid">
  </div>
</div>

---

通常，您不会使用CSS设置画布的大小，而是计算w/h并使用宽度和高度属性

但是如果您使用CSS，您可以使用

getComputedStyle（）

获得CSS设置的画布元素的计算大小：

大小在这里由

getPropertyValue（）

以字符串和像素大小（即“400px”）返回，因此我们使用

parseInt（）

来切掉“px”部分

然后只需在画布上设置宽度和高度并更新其内容

完整示例（根据需要进行调整）：

---

好的，第一个问题解决了。但使用宽度和高度我无法绘制圆形图像链接：当我更改Div ie Height和Width%的样式时，将绘制圆形Differently@Chintan_chiku我可能会建议就这个具体问题提出一个新问题。该链接是到您的intranet的，所以我看不到它，但您通常可以使用drawImage（img、x、y、width、height）来更改绘制图像的大小。

#container
{
    width:100%;
    height:100%;
    position:relative;
}

.all
{
    width:30%;
    height:45%;
    float:left;
}

canvas
{
    width:100%;
    height:100%;
}

var cs     = getComputedStyle(canvas);
var width  = parseInt( cs.getPropertyValue('width'), 10);
var height = parseInt( cs.getPropertyValue('height'), 10);

window.onresize = updateCanvas;

updateCanvas();

function updateCanvas() {

    var cs = getComputedStyle(canvas);
    var width = parseInt(cs.getPropertyValue('width'), 10);
    var height = parseInt(cs.getPropertyValue('height'), 10);
    
    canvas.width = width;
    canvas.height = height;
    
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(width, height);
    ctx.moveTo(0, height);
    ctx.lineTo(width, 0);
    ctx.stroke();
}