canvas 元素的 offsetWidth

2024年3月20日 184次阅读 来源: syaka

正在做的一个项目用到了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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞