我为我正在构建的一个网站绘制了一个简单的p5.js草图，其中一些功能在safari/ios-safari上不起作用，但在chrome上一切都很好。控制台中没有错误。
函数"showAbout"one_answers"hideAbout"在safari上运行良好，但函数"mousePressed"则不然，draw函数中的所有函数也是如此。想知道我的代码中是否有任何错误，或者这是否是一个狩猎小故障？
我将在下面粘贴我的代码。
var dogs = [];
var index;
var x;
var y;
var angle;
var about;
var button;
var canvas;
var exit;
var toggle = false;
var w = window.innerWidth;
var h = window.innerHeight;
function preload() {
for(let i=0; i<11; i++) {
dogs[i] = loadImage(`Images/Batch/dog${i}.jpg`);
}
about = select('.about-container');
about.style('display', 'none');
}
function setup() {
canvas = createCanvas(w, h);
frameRate(5);
angleMode(DEGREES);
button = select('.about-button-text');
button.mousePressed(showAbout);
exit = select('.exit');
exit.mousePressed(hideAbout);
}
function draw() {
fill(255);
textSize(25);
angle = random(-45,45);
rotate(angle);
index = random(dogs);
index.width = w/3;
x = random(w);
y = random(h);
image(index, x, y);
}
function mousePressed() {
if (toggle) {
noLoop();
toggle = false;
} else {
loop();
toggle = true;
}
}
function showAbout() {
about.show();
}
function hideAbout() {
about.hide();
}
function windowResized() {
resizeCanvas(w, h);
}
如果没有可复制的示例，很难100%确定，但分配p5.Image对象的width属性会导致图像无法在Safari上显示(没有错误，在Chrome上运行良好(。一般来说，不应该为p5.js对象的字段赋值。我在文档中没有看到任何内容表明这将得到支持。相反，您可能想要做的是在对image()函数的调用中指定维度：
// I've also taken the liberty of making the variables used here local
// to this function instead of being declared globally.
function draw() {
fill(255);
textSize(25);
let angle = random(-45,45);
rotate(angle);
let img = random(dogs);
// ***** This is broken in Safari, and not supported in general:
// img.width = w / 3;
let x = random(w);
let y = random(h);
let aspect = img.height / img.width;
// image(img, x, y);
// ***** Instead of changing the width property of the p5.Image object you
// should be specifying the width and height parameters of the image()
// function:
image(img, x, y, w / 3, (w / 3) * aspect);
}
可运行的示例：
const imageUrls = [
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Forange-fish.jpg?v=1613865086898',
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fblue-fish.jpg?v=1613865087591',
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fgreen-fish.jpg?v=1613865088114',
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fpurple-fish.jpg?v=1613865090105',
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fwhite-fish.jpg?v=1613865093930',
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fblack-fish.jpg?v=1613983100022',
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fred-fish.png?v=1613983604942'
];
var dogs = [];
var about;
var button;
var canvas;
var exit;
var toggle = true;
var w = window.innerWidth;
var h = window.innerHeight;
function preload() {
for(let i=0; i<imageUrls.length; i++) {
let url = imageUrls[i];
dogs[i] = loadImage(imageUrls[i]);
}
about = select('.about-container');
about.style('display', 'none');
}
function setup() {
canvas = createCanvas(w, h);
frameRate(5);
angleMode(DEGREES);
button = select('.about-button-text');
button.mousePressed(showAbout);
exit = select('.exit');
exit.mousePressed(hideAbout);
}
function draw() {
fill(255);
textSize(25);
let angle = random(-45,45);
rotate(angle);
let img = random(dogs);
//img.width = w/3;
let x = random(w);
let y = random(h);
let aspect = img.height / img.width;
//image(img, x, y);
image(img, x, y, w / 3, (w / 3) * aspect);
}
function mousePressed() {
if (toggle) {
print('toggle off');
noLoop();
toggle = false;
} else {
print('toggle on');
loop();
toggle = true;
}
}
function showAbout() {
about.show();
}
function hideAbout() {
about.hide();
}
function windowResized() {
print(`Resize ${w} x ${h}`);
resizeCanvas(w, h);
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
<meta charset="utf-8" />
</head>
<body>
<button class="about-button-text">Show About</button>
<div class="about-container">
<p>About info...</p>
<button class="exit">Exit</button>
</div>
</body>
</html>更新：片段的一个版本，一旦有图像可用，就开始显示图像
const imageUrls = [
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Forange-fish.jpg?v=1613865086898',
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fblue-fish.jpg?v=1613865087591',
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fgreen-fish.jpg?v=1613865088114',
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fpurple-fish.jpg?v=1613865090105',
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fwhite-fish.jpg?v=1613865093930',
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fblack-fish.jpg?v=1613983100022',
'https://cdn.glitch.com/0e291b8c-6059-4ca6-a0ae-84e67e1f94e7%2Fred-fish.png?v=1613983604942'
];
var dogs = [];
var about;
var button;
var canvas;
var exit;
var toggle = true;
var w = window.innerWidth;
var h = window.innerHeight;
function setup() {
canvas = createCanvas(w, h);
frameRate(5);
angleMode(DEGREES);
for (let i = 0; i < imageUrls.length; i++) {
loadImage(imageUrls[i], img => dogs.push(img));
}
about = select('.about-container');
about.style('display', 'none');
button = select('.about-button-text');
button.mousePressed(showAbout);
exit = select('.exit');
exit.mousePressed(hideAbout);
}
function draw() {
fill(255);
textSize(25);
let angle = random(-45, 45);
rotate(angle);
if (dogs.length > 0) {
let img = random(dogs);
//img.width = w/3;
let x = random(w);
let y = random(h);
let aspect = img.height / img.width;
//image(img, x, y);
image(img, x, y, w / 3, (w / 3) * aspect);
}
}
function mousePressed() {
if (toggle) {
print('toggle off');
noLoop();
toggle = false;
} else {
print('toggle on');
loop();
toggle = true;
}
}
function showAbout() {
about.show();
}
function hideAbout() {
about.hide();
}
function windowResized() {
print(`Resize ${w} x ${h}`);
resizeCanvas(w, h);
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.js"></script>
<meta charset="utf-8" />
</head>
<body>
<button class="about-button-text">Show About</button>
<div class="about-container">
<p>About info...</p>
<button class="exit">Exit</button>
</div>
</body>
</html>