我正在尝试使用 FullPage.js 将 WebGL 脚本添加到网站，但效果不佳(我只看到黑屏)。我不知道问题出在哪里，因为 WebGL 脚本和 Fullpage.js 都可以完美地分开工作。我无法将所有脚本添加到 jsFiddle，但可以在此站点看到脚本 http://www.scandinavija.com/index.html (我删除了所有不相关的脚本)。
当我在 Chrome 中检查网站时，出现以下错误:“未捕获的类型错误:无法读取 particles.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%;
}
最佳答案
您收到此错误是因为您尝试访问评估为 null 的对象的属性。
粒子.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>
关于javascript - 将 Canvas 添加到 fullpage.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41921293/