我正在尝试在画布上为每次鼠标单击加载一个带有p5.js的.png文件。为此,我有以下HTML文件
<html>
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>
<script language="javascript" type="text/javascript" src="sketch.js"></script>
<script language="javascript" type="text/javascript" src="PictureFlower.js"></script>
</head>
<body>
</body>
</html>
以下代码来自该场景的sketch.js文件:
'use strict';
var inc = 0.1;
//scale
var scl = 10;
var cols, rows;
var zoff = 0;
var fr;
var flowers = [];
var actRandomSeed = 0;
var img;
function preload() {
img = loadImage('data/rose.png');
}
function setup() {
createCanvas(800, 800);
//flowfield = new Array(cols * rows);
cols = floor(width / scl);
rows = floor(height / scl);
//background(51);
fr = createP('');
stroke(0, 128);
}
function draw() {
background(255);
//Flow field
var yoff = 0;
for (var y = 0; y < rows; y++) {
var xoff = 0;
for (var x = 0; x < cols; x++) {
var index = x + y * cols;
var angle = noise(xoff, yoff, zoff) * TWO_PI * 4;
var vec = p5.Vector.fromAngle(angle);
xoff += inc;
stroke(0);
push();
translate(x * scl, y * scl);
rotate(vec.heading());
line(0, 0, scl, 0);
pop();
}
yoff += inc;
zoff += 0.0004;
}
fr.html(floor(frameRate()));
}
function mouseIsPressed() {
b = new PictureFlower(mouseX, mouseY, img)
}
下面的函数是PictureFlower.js,其中使用了Picture:
function PictureFlower(x, y, img){
this.x = x;
this.y = y;
this.img = img;
this.display = function(){
image(this.img, this.x, this.y);
}
}
问题是,如果我加载图片,帧速率会下降,并且每次单击都不会显示图片。
希望你能帮助我。