canvas 元素的 offsetWidth

正在做的一个项目用到了canvas，根据 canvas 元素的样式大小、window.devicePixelRatio
动态设置 canvas 元素的 width 和 height 。

但是发现 canvas 元素的 offsetWidth 似乎已经是 CSS 占位大小再乘以 window.devicePixelRatio 了。
再次验证，代码如下：

<div class="canvas-container">
  <canvas></canvas>
</div>
<div id="text"></div>

body {
    margin: 0;
}
.canvas-container {
  width: 500px;
  height: 500px;
  margin: 100px auto;
  background: rgba(0, 0, 0, 0.3);
}
canvas {
    display: block;
    height: 100%;
}

document.querySelector('#text').innerHTML = document.querySelector('.canvas-container').offsetWidth + ' ' + document.querySelector('canvas').offsetWidth;

开发用的是MBP，这台电脑是retina 屏，window.devicePixelRatio 是 2，
发现在 chrome 和 safari 中，都显示 500 1000

等项目上线，再回头详细研究这个问题。

猜你喜欢