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
  }

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

P5js在画布元素后面有一个div元素

1 个答案: