Question

我正在尝试加载我的教师在他的网页上发布的示例，以确保我的笔记本电脑可以使用WebGL。我事先打开了他的例子，他们工作，只是在一个正方形中显示一个正方形。所以我去复制并将他所拥有的确切代码粘贴到记事本文本编辑器中，将它们保存为.js文件，然后对.html文件执行相同操作，并得到上述标题中所述的错误。当我打开“Inspect Element”时，特别是错误的部分是：

var setupWebGL = function(canvas, opt_attribs) {
  function showLink(str) {
  var container = canvas.parentNode;

//未捕获类型错误：无法读取属性'nullNode'为null

  if (container) {
    container.innerHTML = makeFailHTML(str);
    }
  };

  if (!window.WebGLRenderingContext) {
    showLink(GET_A_WEBGL_BROWSER);
    return null;
  }

  var context = create3DContext(canvas, opt_attribs);
  if (!context) {
    showLink(OTHER_PROBLEM);
  }
  return context;
};

有关如何解决此错误的任何想法？由于此代码在教师的网站上工作，因此必须有一些我缺少的东西。如果您需要有关该问题的更多信息/详细信息，请告诉我们。感谢

<!DOCTYPE html>
<html>
<head>
<script id="vertex-shader" type="x-shader/x-vertex">

attribute vec4 vPosition;
void main()
{
  g1_Position = vPosition;
}
</script>
<script id="fragment-shader" type= "x-shader/x-fragment">
precision mediump float;
void main()
{
   g1_FragColor = vec4(1.0,1.0,1.0,1.0);
}
</script>
<script type="text/javascript" src="webgl-utils.js"></script>
<script type="text/javascript" src="initShaders.js"></script>
<script type="text/javascript" src="MV.js"></script>
<script type="text/javascript" src="square.js"></script>
</head>
<body>
<canvas id="g1-canvas" width="512" height="512">
Oops...your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>

Answer 1

在showLink范围内创建了setupWebGL函数，问题是调用showLink时，canvas变量会丢失其值。要解决它你可以做到：

var setupWebGL = function (canvas, opt_attribs) {
    function showLink(str) {
        var container = showLink._canvas.parentNode;
        if (container) {
            container.innerHTML = makeFailHTML(str);
        }
    }
    showLink._canvas = canvas;
};

未捕获的类型错误：无法读取null的属性'parentNode'

1 个答案: