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

2022-01-17 00:00:00 javascript html css html5-canvas

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

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

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

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 设置画布的大小，而是计算 w/h 并使用宽度和高度属性.

Usually you don't set size of canvas using CSS but calculating the w/h and use the width and height properties.

但是如果你使用 CSS，你可以使用 getComputedStyle() 获得由 CSS 设置的画布 element 的计算尺寸:

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

相关文章