canvas.width 和 canvas.clientWidth 有什么区别

Question

我正在学习 Three.js，在一个示例中，作者创建了一个画布元素，然后将渲染器绑定到该画布元素。

 <canvas id="c">
 </canvas>

const renderer = new THREE.WebGLRenderer({canvas});

然后他获取画布元素并将其存储到一个变量中canvas = renderer.domElement;

canvas.width和 和有什么区别canvas.clientWidth？

Answer 1

差异来自HTMLCanvasElement ( <canvas/>) 规范。该width属性特定于 HTMLCanvasElement，表示画布一行存储的“逻辑像素数”。另一方面，该clientWidth属性是所有元素共有的，表示画布水平占据的像素数。这些不需要是相同的 \xe2\x80\x94 例如，通常以比其在页面上占用的空间更高或更低的分辨率绘制到画布中，以提高性能或支持devicePixelRatio > 1、如高密度显示器。

\n