Question

我想用p5绘制动画gif图像。从此草图开始：https://editor.p5js.org/kjhollen/sketches/S1bVzeF8Z

为了显示我的问题，我在草图中的鼠标位置上添加了一个椭圆。当鼠标移到静态gif上方时，椭圆在图像上方。但是当鼠标移到动画gif上时，gif仍然在椭圆的前面。

/**
 * demonstrates how to load a GIF image using
 * createImg to create an <img> on the page
 * and to use that to update animation
 * (and illustrates how p5's loadImage loads only
 * one frame otherwise).
 */

var gif_loadImg, gif_createImg;

function preload() {
  gif_loadImg = loadImage("vegetables.gif");
  gif_createImg = createImg("vegetables.gif");
}

function setup() {
  createCanvas(500, 700);
  background(0);
}

function draw() {
  // loads only first frame
  image(gif_loadImg, 50, 50);

  // updates animation frames by using an html
  // img element, positioning it over top of
  // the canvas.
  gif_createImg.position(50, 350);
  ellipse(mouseX, mouseY, 50,50);
}

总结一下：我想将动画gif插入背景。我已经尝试过这样的事情：

background(gif_createImg.position(50, 350));

但是，此方法的工作方式不同于静态图像。有人有建议吗？也许是一个额外的库，能够解决这个问题？预先感谢！

p5，将动画gif放入背景

0 个答案: