Javascript P5js在canvas元素后面有一个div元素

我添加了一个gif作为元素，现在我想把它放在我加载到画布上的一个镂空的大脑图像后面。gif元素放在大脑图像的顶部，我想把它放在大脑图像的后面。有办法做到这一点吗？这是指向顶针的链接

---

我注意到您使用createImg加载gif图像。 您可以改为使用此库来显示GIF。

这就是说，您必须首先绘制gif，然后在顶部添加遮罩

  var brains, coolpup, coding;
  var canvas;


  function preload() {
     brains = loadImage('https://raw.githubusercontent.com/Er-Jones/EJonesCCS16/master/code/kevin%20final/assets/brains.png');
     coolpup = loadGif('https://raw.githubusercontent.com/Er-Jones/EJonesCCS16/master/code/Brain/gifs/pup.gif');
     coding = loadGif('https://media.giphy.com/media/11Yfb7wNfpIEfK/giphy.gif');
  }

  function setup() {
     createCanvas(windowWidth, windowHeight);
     strokeWeight(2);
     imageMode(CENTER);
  }

  function draw() {
     background(0);
     if (mouseX < width * 0.5) {
        image(coolpup, mouseX, mouseY);
     } else {
        image(coding, mouseX, mouseY);
     }
     image(brains, windowWidth / 2, windowHeight / 2); //DISPLAYS BRAINS
  }

var大脑，coolpup，编码；
var帆布；
函数预加载（）{
大脑=加载图像（'https://raw.githubusercontent.com/Er-Jones/EJonesCCS16/master/code/kevin%20final/assets/brains.png');
coolpup=loadGif（'https://raw.githubusercontent.com/Er-Jones/EJonesCCS16/master/code/Brain/gifs/pup.gif');
编码=loadGif（'https://media.giphy.com/media/11Yfb7wNfpIEfK/giphy.gif');
}
函数设置（）{
createCanvas（窗口宽度、窗口高度）；
冲程重量（2）；
图像模式（中心）；
}
函数绘图（）{
背景（0）；
如果（鼠标X<宽度*0.5）{
图像（coolpup、mouseX、mouseY）；
}否则{
图像（编码、mouseX、mouseY）；
}
图像（大脑，窗口宽度/2，窗口高度/2）；//显示大脑
}

我的示例显示附加到鼠标中心的图像，并根据悬停画布的一半绘制一个或另一个图像

  var brains, coolpup, coding;
  var canvas;


  function preload() {
     brains = loadImage('https://raw.githubusercontent.com/Er-Jones/EJonesCCS16/master/code/kevin%20final/assets/brains.png');
     coolpup = loadGif('https://raw.githubusercontent.com/Er-Jones/EJonesCCS16/master/code/Brain/gifs/pup.gif');
     coding = loadGif('https://media.giphy.com/media/11Yfb7wNfpIEfK/giphy.gif');
  }

  function setup() {
     createCanvas(windowWidth, windowHeight);
     strokeWeight(2);
     imageMode(CENTER);
  }

  function draw() {
     background(0);
     if (mouseX < width * 0.5) {
        image(coolpup, mouseX, mouseY);
     } else {
        image(coding, mouseX, mouseY);
     }
     image(brains, windowWidth / 2, windowHeight / 2); //DISPLAYS BRAINS
  }