1

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

对于示例检查：

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

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

Chrome Canvas 中的亚像素渲染

4

1 回答 1

3

我不确定你到底在问什么。

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

gl = canvas.getContext("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("webgl", { antialias: false });

这将使您的画布的drawingBuffer 使其在页面中显示的大小增加一倍，并可能使其看起来具有抗锯齿效果。

于 2012-09-25T00:23:43.307 回答