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

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

    原文作者:syaka
    原文地址: https://segmentfault.com/a/1190000007588441
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞