Javascript 我可以在p5.js中给div一个函数吗

我试着用p5.js创建一个div，让它每小时在屏幕上移动一次，我想知道这是否可能，我也想知道这个div是否可以在p5.js中每小时随机改变颜色。使用此功能，我们可以每小时执行一次动画。然而，出现的一个问题是，根据调用

setup（）

函数后，函数持续执行

draw（）

。我们可以通过利用

noLoop（）

和

loop

函数来解决这个问题

noLoop（）

函数调用将停止执行

draw（）

函数，而

loop（）

函数将再次开始执行。那么，让我们来看看我们可以如何编码：

注意：根据文档，每个草图只能有一个绘图功能。因此，如果您在一小时内有其他事情在进行动画制作，那么这种方法可能不是最佳选择

//stores the position of the element on the x-axis of the screen
var xPos = 0;
var delay = 60000 * 60; //1,000 milliseconds in a second

window.setInterval(function(){
    //code to be called every hour; make draw function loop
    loop();
}, delay);

function setup(){
    //create your canvas or div or whatever
    createCanvas(400, 400);
}

function draw(){
    // clear the current background
    background(255);

    // set the fill color of your element
    fill(255, 0, 0);

    //change the x position so it can move across the screen
    xPos = xPos + 1;

    // if the circle moves off screen, it's finished animating for the hour
    if(xpos > width)
    {
        xPos = 0; //reset back to 0;
        noLoop(); //end the looping of the draw function        
    }

    //draw your element to the correct location and size; here I'll use an ellipse
     ellipse(xPos, 100, 25, 25);

}

正如我所说的，我对P5.js不是最熟悉的，但希望这能给你足够的想法让它工作起来

编辑：另一种方法是使用CSS动画。有了CSS动画，你甚至不需要P5.js来获得你想要的效果

HTML:

JavaScript:

var div = document.getElementById("my-div");
div.addEventListener("animationend", function(){
    div.style.marginLeft = 0;
    div.style.animationPlayState = paused;
}

window.setInterval(function(){
    div.style.animationPlayState = running; //might need browser prefixes here as well
}, 60000 * 60);

---

还可以使用p5.dom.js插件库中的createDiv（）元素

---

我对P5.js不太熟悉，但是，你不能使用一个普通的JavaScript定时器，每小时调用一次draw函数吗？例如，我如何让我创建的圆在屏幕上移动，因为我不想让圆移动across@MarjorieChamberlain这是同样的想法，只是稍作改动。P5.js中似乎没有“自然”支持，但这可以通过JavaScript实现。使元素相对：

div.style.position=relative。然后在draw（）函数中，将椭圆（）函数调用更改为：
div.style.left=xPos。此外，请记住，<代码> div <代码>是块级元素，因此您可以考虑将其更改为内联块。您可以添加关于所提供的解决方案的更多细节吗？
.my-div {
    /* animation name followed by how long the animation takes to perform */
    /* browser prefixes for more browser support */
    animation: slide-across-screen 1s;
    -webkit-animation: slide-across-screen 1s;
    -moz-animation: slide-across-screen 1s;
}

@keyframes slide-across-screen {
    0% {
        margin-left: 0;
    }
    100% {
        margin-left: 100%;
    }
}

var div = document.getElementById("my-div");
div.addEventListener("animationend", function(){
    div.style.marginLeft = 0;
    div.style.animationPlayState = paused;
}

window.setInterval(function(){
    div.style.animationPlayState = running; //might need browser prefixes here as well
}, 60000 * 60);

var x = 0;
var myDiv;

function setup() {
  var myDiv = createDiv("This is my DIV!");
  setInterval(function() {
    x+=100;
    myDiv.position(x, 200);
  }, 60*60*1000);
}