threejs WebGLRenderer 像素比对画布大小的影响
官方文档 - WebGLRenderer
.setPixelRatio ( value : number ) : undefined
设置设备像素比。通常用于避免HiDPI设备上绘图模糊
.setSize ( width : Integer, height : Integer, updateStyle : Boolean ) : undefined
将输出canvas的大小调整为(width, height)并考虑设备像素比,且将视口从(0, 0)开始调整到适合大小 将updateStyle设置为false以阻止对canvas的样式做任何改变。
- 案例1:
renderer.setPixelRatio(2)
renderer.setSize(100,100,false)
如果没有额外去设置样式的话,以上代码会得到长宽200的canvas:
<canvas data-egine="three.js r158" width="200" height="200">
- 案例2
renderer.setPixelRatio(2)
renderer.setSize(100,100,true)
以上代码会得到html元素长宽100px,画布长宽200的canvas:
<canvas data-egine="three.js r158" width="200" height="200" style="width: 100px; height: 100px;">