共计 2190 个字符,预计需要花费 6 分钟才能阅读完成。
本文简介
点赞 + 关注 + 珍藏 = 学会了
在《p5.js 光速入门》中都是应用 CDN
的形式去应用 p5.js
的,不太合乎当下的开发习惯。
不论是应用 Vue
还是 React
,咱们日常我的项目大部分应该都是应用脚手架的形式进行开发了,依照《p5.js 光速入门》的形式在 module
模式下应用 p5.js
,如果不出意外的话必定是会出意外的!
所以,本文会把《p5.js 光速入门》缺省的 module
开发模式补全。
环境搭建
为了不便,我将应用 vite 搭建一个原生我的项目。
创立我的项目
# 1、创立我的项目
npm create vite@latest
# 2、我的项目命名
? Project name: » p5-demo
# 3、抉择框架。这里抉择 Vanilla 创立一个原生我的项目
? Select a framework: » - Use arrow-keys. Return to submit.
> Vanilla
Vue
React
Preact
Lit
Svelte
Others
# 4、抉择开发语言。我选了 JS,你看本人需要进行抉择吧
? Select a variant: » - Use arrow-keys. Return to submit.
> JavaScript
TypeScript
# 5、初始化并运行我的项目
cd p5-demo
npm install
npm run dev
我的项目就这样创立进去了。
装置 p5.js
进入 p5-demo
我的项目后,应用以下命令装置 p5.js
npm install p5 --save
装置实现后再应用 npm run dev
运行我的项目。
创立画布
在创立画布前,须要先引入 p5.js
。引入后能够尝试输入 p5.js
的版本。
关上 main.js
输出以下内容
import p5 from 'p5' // 引入 p5
console.log(p5.VERSION) // 输入以后应用 p5.js 的版本
关上浏览器的控制台能够看到以后应用的 p5.js
版本,在写本文时所用的是 v1.5.0
此时如果你打算像《p5.js 光速入门》那样间接应用 setup()
创立画布是不可能的了,因为在 module
模式下引入的 p5.js
的 setup()
办法并不会间接绑定到 window
上。
你可能会猜 p5.setup()
总能够了吧?
在控制台输入看看 console.log(p5.setup)
,会发现输入的是 undefined
。
好了,不饶了。
在 module
模式应用 p5.js
,须要这样写:
import p5 from 'p5'
let count = 0
const s = (sketch) => {sketch.setup = function() {sketch.createCanvas(400, 400) // 创立画布,传入画布尺寸
sketch.background(120) // 设置画布背景色
}
sketch.draw = function() {let x = Math.sin(count) * 100 + 200
let y = Math.cos(count) * 100 + 200
sketch.circle(x, y, 50) // 创立圆形
count += 0.1
}
}
new p5(s)
这个例子中,我画了个圆形让它本人转圈圈。
在 module
模式下开发,能够应用 import p5 from 'p5'
的形式引入 p5.js
。
应用 new p5(sketch)
的形式创立 p5
程序。
sketch
是传入到 new p5() 的参数,这个参数是一个函数。正如下面的例子中,在这个函数中就能够应用 setup()
、draw()
等办法了。
将画布绑定到指定元素里
在应用 new p5()
创立进去的画布都是放在页面的尾部。
在 index.html
文件输出以下内容
<div id="app">
<div>123</div>
<div>456</div>
</div>
<script type="module" src="/main.js"></script>
在 main.js
文件输出以下内容
import p5 from 'p5'
const s = (sketch) => {sketch.setup = function() {sketch.createCanvas(400, 400)
sketch.background(120)
}
}
new p5(s)
关上浏览器能够看到,画布是绑定在页面的尾部的。
如果想将画布绑定在指定元素里,能够在 new p5()
办法里传入第二个参数,这个参数能够是元素的 ID,也能够是元素自身。
比方:
在 index.html
文件输出以下内容
<div id="app">
<div>123</div>
<div id="palette"></div>
<div>456</div>
</div>
<script type="module" src="/main.js"></script>
在 main.js
文件输出以下内容
import p5 from 'p5'
const s = (sketch) => {sketch.setup = function() {sketch.createCanvas(400, 400)
sketch.background(120)
}
}
new p5(s, 'palette')
此时再关上浏览器看看页面
此时画布就插入到指定元素里了。
举荐浏览
👍《p5.js 光速入门》
👍《Fabric.js 从入门到收缩》
👍《console.log 也能插图!!!》
👍《纯 CSS 红砖背景墙》
👍《纯 CSS:动静突变背景【一分钟学会】》
👍《这 18 个网站能让你的页面背景炫酷起来》
点赞 + 关注 + 珍藏 = 学会了
代码仓库