将画布导出为p5js中的GIF/PNG格式-前端问题

Exporting canvas as GIF/PNG in p5js(将画布导出为p5js中的GIF/PNG格式)

本文介绍了将画布导出为p5js中的GIF/PNG格式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用原子编辑器。我想用我的画布制作20秒GIF。 saveFrames()有限制(我猜)。它允许将.png文件保存为较短的gif(3-5秒)，即使我键入saveFrames("aa","png",15,22);

我发现了CCapture.js，但找不到任何用于导出画布的代码示例。它不必导出为GIF；但我至少希望保存.png快照我的动画在画布上无限。我该怎么做？

我的p5.js动画代码：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

var x = 0;
var speed = 10;
var d1 = 100;
var d2 = 100;

function setup() {
  createCanvas(600, 400);
  background(0);
  //saveFrames("aa","png",15,22);
}

function draw() {
  stroke(random(100, 255), 0, random(100, 190));
  strokeWeight(1.5);
  ellipse(x, 100, d1, d1);
  x = x + speed;
  d1 = d1 - 0.6;
  
  if (x > width || x < 0) {
    speed = speed * -1;
    fill(speed * 51);
  }
  
  ellipse(x, 300, d1, d1);
  ellipse(x, 200, 50, 50);
}

<script src="aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvcDUuanMvMC43LjEvcDUubWluLmpz"></script>

GIF

我一直在开发一个支持推荐答案导出的新库p5.createLoop。

这将运行草图，然后以相同的帧速率呈现GIF。


function setup() {
  createCanvas(600, 400);
  background(0);
  frameRate(22)
  createLoop({duration:15,gif:true})
}

这里是一个codePen，其中包含完整的示例。大约需要两分钟，超过50MB，完全值得

这篇关于将画布导出为p5js中的GIF/PNG格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！