threejs WebGLRenderer 像素比对画布大小的影响

本文主要是介绍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;">

这篇关于threejs WebGLRenderer 像素比对画布大小的影响的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---