p5.js 入门教程

最新推荐文章于 2024-08-18 09:46:22 发布

Oinguoguo

最新推荐文章于 2024-08-18 09:46:22 发布

阅读量2k

点赞数 1

文章标签： html 3d javascript 3dsmax

本文链接：https://blog.csdn.net/Oinguoguo/article/details/111520491

版权

p5.js 官方地址 https://p5js.org/

p5.js 是个 JavaScript 创意编程程式库，其专注在让编程更易于使用及更加广泛的包容艺术家、设计师、教育家、初学者以及任何其他人！p5.js 是个免费及开源的软件因为我们相信所有人都应该能自由使用软件及用于学习软件的工具。

p5.js 使用绘图的比喻并有一副完整的绘画功能。除此之外，您也不单限于您的绘图画布。您可以将您整个浏览器页面当作您的绘图，这包括了 HTML5 物件如文字、输入框、视屏、摄像头及音频。

使用 p5.js Editor 制作您的第一个绘图。

1. 新建 index.html

2. index.html 内容保存为

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/p5@1.2.0/lib/p5.js"></script>
    <script>
        function setup() {
            createCanvas(400, 400);
        }

        function draw() {
            background(220);
            ellipse(50,50,80,80);
        }
    </script>
</head>
<body>
<main>
</main>
</body>
</html>

3. 浏览器访问 index.html, 完成

Oinguoguo

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
p5.js 入门教程

p5.js 官方地址https://p5js.org/p5.js 是个 JavaScript 创意编程程式库，其专注在让编程更易于使用及更加广泛的包容艺术家、设计师、教育家、初学者以及任何其他人！p5.js 是个免费及开源的软件因为我们相信所有人都应该能自由使用软件及用于学习软件的工具。p5.js 使用绘图的比喻并有一副完整的绘画功能。除此之外，您也不单限于您的绘图画布。您可以将您整个浏览器页面当作您的绘图，这包括了 HTML5 物件如文字、输入框、视屏、摄像头及音频。使用p5.js Edi..
复制链接

扫一扫