p5.js: 随机颜色和另存为pdf功能

Question

这是我的代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
<script>
var angle = 0;

function setup() {
  createCanvas(710, 400);
  background(255, 0, 0);
  noStroke();
  fill(0, 102);
}

function draw() {
  if (mouseIsPressed === true) {
    angle += 5;
    var val = cos(radians(angle)) * 20.0;
    for (var a = 0; a < 360; a += 75) {
      var xoff = cos(radians(a)) * val;
      var yoff = sin(radians(a)) * val;
      fill(random(0, 255));
      ellipse(mouseX, mouseY, random(20, 120), random(20, 120));
    }
  }
}
</script>

<button>Save as PDF</button>

我需要：

A) 对象的颜色当前为灰色（从白色到黑色）。我需要随机排列的三种不同的红色。这怎么可能编码？

B) "Save as PDF" 按钮应该可以工作...

Answer 1

对于 A 部分，您可以这样做

fill(random(0, 255),random(0, 255),random(0, 255))

但我建议您再看一下 P5.js 文档以了解其工作原理和工作原理

对于 B：您可以尝试使用 jsPDF

<script src="//cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.3/jspdf.min.js"></script>
<canvas id="myCanvas" width="578" height="200"></canvas>
<button id="download">download</button>
<script>
  var download = document.getElementById('download');
  download.addEventListener("click", function() {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    // only jpeg is supported by jsPDF
    var imgData = canvas.toDataURL("image/jpeg", 1.0);
    var pdf = new jsPDF();
    pdf.addImage(imgData, 'JPEG', 0, 0);
    pdf.save("download.pdf");
  }, false);
</script>

p5.js: 随机颜色和另存为pdf功能

p5.js: Random colors and save as pdf function

html

javascript

p5.js