Javascript 垂直视差不是';t使用Parallax.js工作

Javascript 垂直视差不是';t使用Parallax.js工作,javascript,css,canvas,parallax,Javascript,Css,Canvas,Parallax,因此,我尝试使用插件和两个单独的画布元素创建一个空间效果,这两个元素创建了星星。我已经按照插件的github的指示设置了HTML和JS,但是这两个画布元素都没有垂直移动 我做了一个演示。代码的第一部分是插件,底部是我的画布代码 下面是我用于canvas元素的代码 var cvsSmall = document.getElementById("cvsSmall"), ctxSmall = cvsSmall.getContext("2d"), cvsBig = document.getEle

因此,我尝试使用插件和两个单独的画布元素创建一个空间效果,这两个元素创建了星星。我已经按照插件的github的指示设置了HTML和JS,但是这两个画布元素都没有垂直移动

我做了一个演示。代码的第一部分是插件,底部是我的画布代码

下面是我用于canvas元素的代码

var cvsSmall = document.getElementById("cvsSmall"),
  ctxSmall = cvsSmall.getContext("2d"),
  cvsBig = document.getElementById("cvsBig"),
  ctxBig = cvsBig.getContext("2d"),
  particlesSmall = [],
  particlesBig = [];

//main
fitCanvas();
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
makeParticles(20);
drawParticles();
ctxSmall.fillRect(0, window.innerWidth, 0, window.innerHeight);

//functions
function fitCanvas() {
  cvsSmall.width = window.innerWidth;
  cvsBig.width = window.innerWidth;
  cvsSmall.height = window.innerHeight;
  cvsBig.height = window.innerHeight;
}

function makeParticles(amount) {
  for (i = 0; i < amount; i++) {
    particle = {
      x: Math.random() * cvsSmall.width,
      y: Math.random() * cvsSmall.height,
      size: 1,
    }
    particlesSmall.push(particle);
  }
  for (i = 0; i < amount; i++) {
    particle = {
      x: Math.random() * cvsBig.width,
      y: Math.random() * cvsBig.height,
      size: 5,
    }
    particlesBig.push(particle);
  }
}

function drawParticles() {
  for (i = 0; i < particlesSmall.length; i++) {
    p = particlesSmall[i];
    ctxSmall.beginPath();
    ctxSmall.fillStyle = "#FFFFFF";
    ctxSmall.arc(p.x, p.y, p.size, 0, 2 * Math.PI);
    ctxSmall.closePath();
    ctxSmall.fill();
  }
  for (i = 0; i < particlesBig.length; i++) {
    p = particlesBig[i];
    ctxBig.beginPath();
    ctxBig.fillStyle = "#FFFFFF";
    ctxBig.arc(p.x, p.y, p.size, 0, 2 * Math.PI);
    ctxBig.closePath();
    ctxBig.fill();
  }
}
var-cvsSmall=document.getElementById(“cvsSmall”),
ctxSmall=cvsSmall.getContext(“2d”),
cvsBig=document.getElementById(“cvsBig”),
ctxBig=cvsBig.getContext(“2d”),
particlesSmall=[],
particlesBig=[];
//主要
fitCanvas();
var scene=document.getElementById('scene');
var视差=新视差(场景);
制造颗粒(20);
牵引颗粒();
ctxSmall.fillRect(0,window.innerWidth,0,window.innerHeight);
//功能
函数fitCanvas(){
cvsSmall.width=window.innerWidth;
cvsBig.width=window.innerWidth;
cvsSmall.height=window.innerHeight;
cvsBig.height=window.innerHeight;
}
函数makeParticles(数量){
对于(i=0;i
这是一个相当小的问题,但事实证明,我的
的高度是0,这影响了垂直视差