JavaScript函数draw()形状到图像

Question

我有一个JS脚本，该脚本根据播放音乐的音量绘制椭圆及其振幅：

var song, analyzer;
function preload() {
  song = loadSound('sounds/masterflash.mp3');
}
function setup() {
  createCanvas(250, 250);
  song.loop();
  // create a new Amplitude analyzer
  analyzer = new p5.Amplitude();
  // Patch the input to an volume analyzer
  analyzer.setInput(song);
}
function draw() {
  background(0, 0, 0, 0)
  // Get the average (root mean square) amplitude
  var rms = analyzer.getLevel();
  fill(0, 0, 0, 20);
  stroke(255, 255, 255);
  // Draw an ellipse with size based on volume
  ellipse(width/3, height/3, 10+rms*200, 10+rms*200);
}

您可以在此处查看它在此处的示例

您可以在创建椭圆的最后一个代码上看到。我该怎么做同样的事情，但是它不用绘制椭圆，而是加载了我拥有的圆形.png图像？

Answer 1

您必须先预紧图像，然后绘制它。有关image()

的更多信息

尝试这样的

function preload() { 
  img = loadImage('images/laDefense.jpg');
  song = loadSound('sounds/masterflash.mp3');
}
...
function draw() {
  background(0, 0, 0, 0)
  // Get the average (root mean square) amplitude
  var rms = analyzer.getLevel();
  fill(0, 0, 0, 20);
  stroke(255, 255, 255);
  image(img, width/3, height/3, 10+rms*200, 10+rms*200);
}