Question

使用覆盖整个视图的画布我想在div容器标记的区域绘制一个旋转三角形。

但是，由于滚动，Firefox并不总是将三角形绘制到div占位符中。请参阅picture（忽略重复的背景图片）和demo。在滚动时，Chromium正确呈现三角形。

我的代码是错误还是Firefox实现不够快，无法在滚动时将三角形渲染到正确的位置？

算法：

初始化：

创建覆盖整个视图的大画布，获取WebGL上下文
为渲染三角形分配缓冲区

渲染循环：

如果div占位符在当前视图中，则：

使用gl.viewport设置渲染坐标以匹配div占位符的位置
渲染三角形（实际方向来自Date（））

代码：

var triangle;
var gl;

function drawScenes() {
  gl.clear(gl.COLOR_BUFFER_BIT);
  if(isScrolledIntoView('#div0')) {
    // set up viewport for rendering on top of the div placeholder
    var docViewTop = $(window).scrollTop();
    gl.viewport(0, $('#canvas').height() + docViewTop - 400, 200, 200);
    triangle.render();
  }
  requestAnimFrame(drawScenes);
}

function start() {
  createOverlayCanvas('canvas');
  gl = initGL('canvas');
  triangle = new Triangle(gl); //sets up the buffers
  drawScenes();
}

我正在使用Ubuntu 11.10和Nvidia专有驱动程序。

这背后的动机是我希望拥有多个占位符并将不同的对象呈现在每个占位符中。为什么我没有使用多幅画布？

初始化一个画布更快
将一个特定对象绘制到多个占位符时，将共享对象数据。与多幅画布不同，我们无法共享州。

感谢您的帮助。

Answer 1

我现在用我的firefox 9.0.1（在Windows 7上）尝试它，它的工作方式与chrome完全相同......

尝试更新你的firefox或将bug报告给mozzila ......

在Firefox中滚动时渲染到由DIV标记的特定区域

1 个答案: