如何在调整浏览器大小后获取画布的宽度和高度 [英] How to get width and height of canvas after resizing the browser

问题描述

我想获得响应的画布的宽度和高度。我在一个页面上有5个canvas元素。

I want to get width and height of canvas which is responsive. I have 5 canvas elements on a single page.

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

Using Javascript before drawing I want to know the height and width of canvas to be able to draw images at the right size.

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：

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

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

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

推荐答案

但是如果你使用CSS，你可以得到canvas的计算大小

But if you use CSS you can get the calculated size of the canvas element set by CSS using getComputedStyle():

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

这里的大小由 getPropertyValue（）作为字符串和像素大小（即400px），因此我们使用 parseInt（）来切割px部分。

the size is here returned by getPropertyValue() as a string and in pixel size (ie. "400px"), so we use parseInt() to chop of the "px" part.

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

Then simply set the width and height on canvas and update its content.

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

Full example (adjust as needed):

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();
}

这篇关于如何在调整浏览器大小后获取画布的宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！