Question

当我慢慢翻译三角形时，它会逐个像素地移动。有没有办法强制谷歌浏览器使用抗锯齿来平滑移动？

对于示例结帐：

https://dl.dropbox.com/u/4571/musicope2/index.html

PS：我想知道这个答案是否也适用于webgl，如果答案仍然有效？：

Sub-pixel rendering in Chrome Canvas

Answer 1

我不确定你要求的是什么。

使用

创建WebGL上下文时可以请求消除锯齿

gl = canvas.getContext("experimental-webgl", { antialias: true });

但是它取决于浏览器是否实际上打开了抗锯齿，并且达到了什么级别。例如，某些浏览器由于驱动程序错误而禁止在某些GPU上使用抗锯齿。

否则，您可以将画布设置为更大的尺寸，并使用css将其显示为更小的尺寸。浏览器很可能会使用GPU双线性过滤来显示结果，从而为您提供抗锯齿效果。为此，请将画布的大小设置为要显示的大小的两倍，并将css设置为要显示的大小。例如：

desiredWidth = 640;
desiredHeight = 480;
canvas.width = desiredWidth * 2;
canvas.height = desiredHeight * 2;
canvas.style.width = desiredWidth + "px";
canvas.style.height = dsiredHeight + "px";
gl = canvas.getContext("experimental-webgl", { antialias: false });

这将使你的画布的drawingBuffer加倍于它在页面中显示的大小，并且可能使它看起来消除锯齿。

使用WebGL + Google Chrome的子像素动画？

1 个答案: