我正在try 在IIFE中使用p5.js.到目前为止,当我try 使用print()方法时,它按预期工作,并将我传递给它的任何内容记录在控制台日志(log)中.下面是我的代码.
(function () {
function setup() {
print("Hello World");
}
$(document).ready(function () {
new p5();
setup();
});
})();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.min.js"
integrity="sha512-uaz5GpnQoE6t5echKlX8P52czvsIGgLPcvlzfvRubLZ1Hp8JemUDnbUiAahbVtPb+jUVrNETuXvAhDDF/N3M4w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<title>Game</title>
</head>
<body>
<main>
<div id="puzzle-container">
<canvas id="puzzle"></canvas>
</div>
</main>
<script src="main.js"></script>
</body>
</html>
我甚至可以使用select()方法来定位DOM中的元素并将其打印出来,而且它也可以工作.但是,当我try 使用createCanvas()函数时,它似乎不起作用.将生成一个默认画布,但它不会具有指定的大小,也不会使用Parent()方法放置在指定的父容器中.我也没有收到任何错误,只是收到一条警告消息:"p5.js似乎已经导入了多次.请删除重复的导入."
我想要做的事有可能实现吗?
我的最终目标是创建一个名称空间,并创建以该名称空间为前缀但仍然能够使用p5API方法的函数.以下面的代码为例:
var game = game || {};
(function(ns) {
var canvasWidth = 480;
var canvasHeight = 480;
ns.initGame = function() {
createCanvas(canvasWidth, canvasHeight);
background(153);
}
$(document).ready(function() {
ns.initGame();
})
})(game);
与代码相关的HTML与前面提供的HTML完全相同.上面的代码将记录一条消息:"createCanvas"未在当前作用域中定义.所以我的最终问题是,有没有办法在不使用实例模式下使用P5的情况下实现我想要的生活结果?我希望避免在P5功能前面加上sketch.
或p.
等前缀.