消除高分辨率屏幕下的锯齿

问题

最近在做一个展示spine动画的html5页面，使用了WebGL渲染器，但渲染出的画面锯齿严重，如图：

消除高分辨率屏幕下webgl canvas产生的锯齿_css

原因

webgl使用canvas绘图，canvas绘制的图片宽高可能和其本身宽高不一样，如果设置style="width: 100%;height: 100%;"的话，容器宽高还会动态变化，但绘制的图片宽高不会跟着变化。而css会把图片强行拉伸到容器的宽高，因此产生严重的锯齿现象。

解决方法

改变canvas绘制的图片大小：

<canvas width="?px" height="?px">

改变canvas容器的大小：

<canvas style="width: ?px;height: ?px;">

改改webgl的代码，本质上就是让canvas绘制的图片像素数量翻了几倍，来提高清晰度，因此如果动画变卡了，可以设置成一定宽度以下生效：

let w = canvas.clientWidth;
let h = canvas.clientHeight;
let DPR = window.devicePixelRatio;// 设备像素比
if (DPR) {
    canvas.width = w * DPR;
    canvas.height = h * DPR;
    let ctx = canvas.getContext("2d");
    if (ctx)
        ctx.scale(DPR, DPR);
}
this.context.gl.viewport(0, 0, w, h);

成果

看上去顺眼很多啦~

消除高分辨率屏幕下webgl canvas产生的锯齿_渲染器_02

参考

WebGL在高分辨率下（Retina）显示有问题