Javascript 向p5.js“artwork”添加gif

Javascript 向p5.js“artwork”添加gif,javascript,gif,p5.js,Javascript,Gif,P5.js,我尝试在p5.js中添加一个gif到我的作品中,基本上是一张带有移动元素的图片 然而,我遇到了错误UncaughtTypeError:gifimage.position不是一个函数,尽管我认为我是按照不同指南中的说明操作的 我试过这个: 下面是……的代码。。。。。。。。。表示不影响误差的零件 var gifimage; function preload() { ......... gifimage = createImage("gifimage.gif"); } functi

我尝试在p5.js中添加一个gif到我的作品中,基本上是一张带有移动元素的图片

然而,我遇到了错误UncaughtTypeError:gifimage.position不是一个函数,尽管我认为我是按照不同指南中的说明操作的

我试过这个:

下面是……的代码。。。。。。。。。表示不影响误差的零件

var gifimage;

function preload() {
    .........
    gifimage = createImage("gifimage.gif");
}

function setup() {
    createCanvas(1920, 1080);
}

function draw() {
    .........
    if (keyIsPressed === true) {
        gifimage.position(500, 800);
    }
}

位置不是p5.js的函数。为了使用position,您需要创建一个imgdom元素

在这里,我修改了它,以显示如何通过按键来改变img的位置

var gif_createImg;

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

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

function draw() {
    background(0);


  // updates animation frames by using an html
  // img element, positioning it over top of
  // the canvas.
  if (keyIsPressed){
    gif_createImg.position(50, 50);
  } else {
    gif_createImg.position(100,100);
  }
}
要使用dom函数,您需要包含p5.js库和p5.dom.js插件

<script src='https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js'></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.6/addons/p5.dom.js"></script>
在哪里调用预加载函数?