将画布添加到 fullpage.js答案

【问题标题】：Add canvas to fullpage.js将画布添加到 fullpage.js
【发布时间】：2017-01-29 13:14:01
【问题描述】：

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

当我在 Chrome 中检查网站时，我收到以下错误：“未捕获的类型错误：无法在particle.js:6 处读取 null 的属性 'offsetWidth'” 这可能是问题吗？ p>

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

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%;
}

【问题讨论】：

标签： javascript webgl fullpage.js

【解决方案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>

【讨论】：

我尝试按照您所说的将脚本添加到 HTML 文件中，并将代码包装在文档加载回调中，但没有任何改变。屏幕仍然是全黑的，脚本没有运行...
我也试过了，效果很好。您不必在某处添加脚本，该脚本已经存在，您只需编辑 particles.js。只需在文件顶部添加$(function() {，并在末尾添加}); :)
你不必包装你的函数，只需将你的脚本标签放在文件的底部而不是顶部
你也不需要type="text/javascript" （是的，我知道它在问题中，只是传递信息，如果你愿意，你可以随意放置，只是在任何浏览器中都不需要） .
谢谢但已经知道了，这不是重点，我只是想解决问题，不是代码审查:)