将 canvas 添加到 fullpage.js

Question

我正在尝试将 WebGL 脚本添加到具有 FullPage.js 的站点，但效果不佳（我只是遇到黑屏）。我不知道问题出在哪里，因为 WebGL 脚本和 Fullpage.js 都可以完美地分开工作。我无法将所有脚本添加到 jsFiddle，但可以在该站点看到脚本 http://www.scandinavija.com/index.html（我删除了所有不相关的脚本）。

当我检查 Chrome 中的站点时，出现以下错误："Uncaught TypeError: Cannot read property 'offsetWidth' of null at particles.js:6" 问题可能出在这里吗？

然而，我的直觉告诉我问题应该出在这里：

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css">
    <link rel="stylesheet" type="text/css" href="css/examples.css">

    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="js/scrolloverflow.js"></script>
    <script type="text/javascript" src="js/jquery.fullPage.js"></script>

    <!-- Particles (three.js) -->
    <script type="text/javascript" src="js/detector.js"></script>
    <script type="text/javascript" src="js/stats.min.js"></script>
    <script type="text/javascript" src="js/three.min.js"></script>
    <script type="text/javascript" src="js/particles.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#fullpage').fullpage({
                verticalCentered: true,
                anchors: ['firstSection', 'secondSection', '3rdSection',     
                '4thSection', '5thSection'],
            });
        });
    </script>
</head>
<body>

<!-- My canvas (three.js) below -->

<div id="canvas-container"></div>

    <div id="fullpage">
        <div class="section" id="section1"></div>
        <div class="section" id="section2"></div>
        <div class="section" id="section3"></div>
        <div class="section" id="section4"></div>
        <div class="section" id="section5"></div>
    </div>
</body>
</html>

CSS:

@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
    background-color: #000;
}
a{
    text-decoration:none;
}
table {
    border-spacing: 0;
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
    font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;
}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
q:before,q:after {
   content:'';
}
abbr,acronym { border: 0;
}

/* START OF MY SCRIPT BELOW*/

#canvas-container {
    z-index: 1000;
    position: absolute;
    width: 100%;
    height: 100%;
}

Answer 1

您收到此错误是因为您尝试访问评估为 null 的对象的属性。

particles.js

var container = document.getElementById('canvas-container');
//                                       ^^^^^^^^^^^^^^^^
//                                       not found
var w = container.offsetWidth;
//      ^^^^^^^^^
//      eq. null

这是因为执行脚本 particles.js 时，您的元素 #canvas-container 不存在于 DOM 中。

您只需将代码包装在文档加载的回调中，以确保可以访问该元素：

$(function() {
  // particles.js code
});

您也可以简单地将脚本标记移动到 HTML 文件的末尾：

  ...
  <script type="text/javascript" src="js/particles.js"></script>
</body>

将 canvas 添加到 fullpage.js

Add canvas to fullpage.js

javascript

webgl

fullpage.js