P5js mit einem div-Element hinter einem canvas-Element

Question

Ich habe ein gif als Element hinzugefügt und möchte es jetzt hinter ein ausgehöhltes Gehirnbild legen, das ich auf meine Leinwand geladen habe. Das Gif-Element liegt oben auf dem Bild des Gehirns und ich möchte es hinter das Bild des Gehirns legen. Gibt es eine Möglichkeit, dies zu tun? Hier ist der Link zum Fingerhut 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

Ich bemerkte, dass Sie CreateImg verwendet, um Ihr gif-Bild zu laden. Sie können stattdessen diese Bibliothek verwenden, um Gifs anzuzeigen. https://github.com/antiboredom/p5.gif.js

Dies gesagt, müssen Sie zuerst das gif zeichnen die Maske oben hinzufügen.

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 
    } 

Mein Beispiel zeigt das Bild auf die Mitte der Maus befestigt und zieht entweder das eine oder das andere Bild in Abhängigkeit von der der Hälfte der Leinwand Sie schweben.