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：

代码语言：javascript复制

renderer.setPixelRatio(2)
renderer.setSize(100,100,false)

如果没有额外去设置样式的话，以上代码会得到长宽200的canvas：

代码语言：javascript复制

<canvas data-egine="three.js r158" width="200" height="200">

• 案例2

代码语言：javascript复制

renderer.setPixelRatio(2)
renderer.setSize(100,100,true)

以上代码会得到html元素长宽100px，画布长宽200的canvas：

代码语言：javascript复制

<canvas data-egine="three.js r158" width="200" height="200" style="width: 100px; height: 100px;">

canvas data 官方文档 height width

0 人点赞