【零基础学WebGL】高清屏适配

设备像素比

有时候我们会发现，使用WebGL绘制的图片在手机上存在明显的锯齿。

这是因为，目前大多数手机屏幕都采用了HiDPI或者Retina高清屏，相比传统的屏幕的优势是，单位CSS pixel可以显示更多物理像素，从而图片显示更细腻。

这里需要引入一个概念，设备像素比（device pixel ratio），缩写dpi，表示显示设备的物理像素分辨率和CSS像素分辨率的比例。近两年的iphone机型的dpi都达到3了。

在JavaScript中，可以通过Window.devicePixelRatio获取当前设备屏幕的dpi。

Cavas尺寸

想让WebGL适配高清屏幕，我们需要一些额外工作。

首先，我们需要理解Canvas的尺寸。Canvas有两个尺寸：

1. 绘制缓冲区大小，表示WebGL可以用来绘制内容的最大区域，单位是物理像素。
2. Canvas显示大小，表示Canvas元素在屏幕显示的大小，单位是CSS Pixel。

绘制缓冲区大小，可以通过canvas元素的width和height两个属性设置。

// html
<canva width="300" height="300">

// js
canvas.width = 300;
canvas.height = 300; 

显示大小࿰