P5js在畫布元素後面有一個div元素

Question

我添加了一個gif作爲元素，現在我想將它放在我的畫布上加載的鏤空大腦圖像後面。 GIF元素位於大腦圖像的頂部，我想將它放在大腦圖像的後面。有沒有辦法做到這一點？這是鏈接到頂針https://thimbleprojects.org/ejonescc16/63728/。

var brains; 
var coolpup; 
var canvas; 


function preload(){ 

    brains = loadImage('https://raw.githubusercontent.com/Er-Jones/EJonesCCS16/master/code/kevin%20final/assets/brains.png'); 

    coolpup = createImg('https://raw.githubusercontent.com/Er-Jones/EJonesCCS16/master/code/Brain/gifs/pup.gif'); 

} 

function setup() { 

    createCanvas(windowWidth,windowHeight); 
    strokeWeight(2); 

    rSlider = createSlider(0, 255, 100); 
    rSlider.position(50, windowHeight-80); 
    gSlider = createSlider(0, 255, 0); 
    gSlider.position(50, windowHeight-60); 
    bSlider = createSlider(0, 255, 255); 
    bSlider.position(50, windowHeight-40); 
} 

function draw() { 
    background(0); 
    r = rSlider.value(); 
    g = gSlider.value(); 
    b = bSlider.value(); 
    imageMode(CENTER); 

    coolpup.position(windowWidth/2-350, windowHeight/2-150); 
    coolpup.size(130,200); 

    image(brains, windowWidth/2, windowHeight/2);//DISPLAYS BRAINS 


    fill(255); 
    textSize(30); 
    text("This is my brain", windowWidth/2-375, windowHeight-100); 

    text("This is my brain while coding", windowWidth/2+65, windowHeight-100); 


} 

Answer 1

我注意到你使用了createImg來加載你的gif圖像。 你可以改用這個庫來顯示gif。 https://github.com/antiboredom/p5.gif.js

這就是說，你必須先把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 
    } 

我的示例顯示附加到鼠標中心的圖像，並繪製一個或另一個圖像，具體取決於您懸停的畫布的哪一部分。