p5.js 入门教程

编程知识 行业动态 更新时间:2024-06-13 00:19:46

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

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

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

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

1. 新建 index.html

2. index.html 内容保存为 

<html>
<head>
    <script src="https://cdn.jsdelivr/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, 完成

更多推荐

p5.js 入门教程

本文发布于:2023-03-28 19:34:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/def33f1606b88cef0192887a5463d64e.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:入门教程   js

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!