P5.js开发之——2D图形绘制(3)

2024-03-24 06:10
文章标签 开发 js 绘制 图形 2d p5

本文主要是介绍P5.js开发之——2D图形绘制(3),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

一 概述

本文介绍通过P5.js绘制常见的2D形状

编号图形函数
1弧形arc()
2椭圆形ellipse()
3circle()
4直线line()
5point()
6四角形quad()
7方形rect()
8方形square()
9三角形triangle()

二 项目创建

2.1 通过VSCode插件创建P5.js项目

index.html
sketch.js

2.2 新建libs文件夹,并将p5.js 复制到libs目录下,并添加引用(index.html)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>p5demo</title><script src="./libs/p5.js"></script>
</head>
<body><script src="sketch.js"></script>
</body>
</html>

三 2D图形绘制—代码复制到draw函数

3.1 弧形—arc()

代码及预览

参数及说明
arc(x, y, w, h, start, stop, [mode], [detail])
参数说明
x数字:弧形的椭圆形的 x 坐标
y数字:弧形的椭圆形的 y 坐标
w数字:弧形的椭圆形的宽度
h数字:弧形的椭圆形的高度
start数字:弧形开始的角度,用弧度定义
stop数字:弧形结束的角度,用弧度定义
mode常数:可选参数用以定义弧形的画法,可用 CHORD、PIE 或 OPEN
detail数字:WebGL模式的可选参数

3.2 椭圆形—ellipse()

代码及预览

参数及说明
ellipse(x, y, w, [h])
ellipse(x, y, w, h, [detail])
参数说明
x数字:椭圆形的 x 坐标
y数字:椭圆形的 y 坐标
w数字:椭圆形的宽度
h数字:椭圆形的高度
detail整数:椭圆形的径向扇区数

3.3 圆—circle()

代码及预览

参数及说明
circle(x, y, d)
参数说明
x数字:圆的 x 坐标
y数字:圆的 y 坐标
d数字:圆的直径

3.4 直线—line()

代码及预览

参数及说明
line(x1, y1, x2, y2)
line(x1, y1, z1, x2, y2, z2)
参数说明
x1数字:第一个点的 x 坐标
y1数字:第一个点的 y 坐标
x2数字:第二个点的 x 坐标
y2数字:第二个点的 y坐标
z1数字:第一个点的z 坐标
z2数字:第二个点的 z 坐标

3.5 点—point()

代码及预览

参数及说明
point(x, y, [z])
参数说明
x数字:x 坐标
y数字:y 坐标
z数字:z 坐标(用于 WEBGL 模式)

3.6 四角形—quad()

代码及预览

参数及说明
quad(x1, y1, x2, y2, x3, y3, x4, y4, [detailX], [detailY])
quad(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4, [detailX], [detailY])
参数说明
x1数字:第一个点的 x 坐标
y1数字:第一个点的 y 坐标
x2数字:第二个点的 x 坐标
y2数字:第二个点的 y坐标
x3数字:第三个点的 x 坐标
y3数字:第三个点的 y 坐标
x4数字:第四个点的 x 坐标
y4数字:第四个点的 y 坐标
z1数字:第一个点的 z 坐标
z2数字:第二个点的 z 坐标
z3数字:第三个点的 z 坐标
z4数字:第四个点的 z 坐标

3.7 方形—rect()

代码及预览

参数及说明
rect(x, y, w, [h], [tl], [tr], [br], [bl])
rect(x, y, w, h, [detailX], [detailY])
参数说明
x数字:方形的 x 坐标
y数字:方形的 y 坐标
w数字:方形的宽度
h数字:方形的高度
tl数字:可选性左上角拐角半径值
tr数字:可选性右上角拐角半径值
br数字:可选性右下角拐角半径值
bl数字:可选性左下角拐角半径值
detailX整数:x 方向段数
detailY整数:y 方向段数

3.8 方形—square()

代码及预览

参数及说明
square(x, y, s, [tl], [tr], [br], [bl])
参数说明
x数字:方形的 x 坐标
y数字:方形的 y 坐标
s数字:方形的 尺寸
tl数字:可选性左上角拐角半径值
tr数字:可选性右上角拐角半径值
br数字:可选性右下角拐角半径值
bl数字:可选性左下角拐角半径值

3.9 三角形—triangle()

代码及预览

参数及说明
triangle(x1, y1, x2, y2, x3, y3)
参数说明
x1数字:第一个点的 x 坐标
y1数字:第一个点的 y 坐标
x2数字:第二个点的 x 坐标
y2数字:第二个点的 y 坐标
x3数字:第三个点的 x 坐标
y3数字:第三个点的 y 坐标

四 参考

  • P5.js—参考文献

这篇关于P5.js开发之——2D图形绘制(3)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/840671

相关文章

使用Python绘制3D堆叠条形图全解析

《使用Python绘制3D堆叠条形图全解析》在数据可视化的工具箱里,3D图表总能带来眼前一亮的效果,本文就来和大家聊聊如何使用Python实现绘制3D堆叠条形图,感兴趣的小伙伴可以了解下... 目录为什么选择 3D 堆叠条形图代码实现:从数据到 3D 世界的搭建核心代码逐行解析细节优化应用场景:3D 堆叠图

SpringBoot开发中十大常见陷阱深度解析与避坑指南

《SpringBoot开发中十大常见陷阱深度解析与避坑指南》在SpringBoot的开发过程中,即使是经验丰富的开发者也难免会遇到各种棘手的问题,本文将针对SpringBoot开发中十大常见的“坑... 目录引言一、配置总出错?是不是同时用了.properties和.yml?二、换个位置配置就失效?搞清楚加

Python中对FFmpeg封装开发库FFmpy详解

《Python中对FFmpeg封装开发库FFmpy详解》:本文主要介绍Python中对FFmpeg封装开发库FFmpy,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、FFmpy简介与安装1.1 FFmpy概述1.2 安装方法二、FFmpy核心类与方法2.1 FF

基于Python开发Windows屏幕控制工具

《基于Python开发Windows屏幕控制工具》在数字化办公时代,屏幕管理已成为提升工作效率和保护眼睛健康的重要环节,本文将分享一个基于Python和PySide6开发的Windows屏幕控制工具,... 目录概述功能亮点界面展示实现步骤详解1. 环境准备2. 亮度控制模块3. 息屏功能实现4. 息屏时间

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,:本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部

使用Python开发一个现代化屏幕取色器

《使用Python开发一个现代化屏幕取色器》在UI设计、网页开发等场景中,颜色拾取是高频需求,:本文主要介绍如何使用Python开发一个现代化屏幕取色器,有需要的小伙伴可以参考一下... 目录一、项目概述二、核心功能解析2.1 实时颜色追踪2.2 智能颜色显示三、效果展示四、实现步骤详解4.1 环境配置4.

Python使用smtplib库开发一个邮件自动发送工具

《Python使用smtplib库开发一个邮件自动发送工具》在现代软件开发中,自动化邮件发送是一个非常实用的功能,无论是系统通知、营销邮件、还是日常工作报告,Python的smtplib库都能帮助我们... 目录代码实现与知识点解析1. 导入必要的库2. 配置邮件服务器参数3. 创建邮件发送类4. 实现邮件

基于Python开发一个有趣的工作时长计算器

《基于Python开发一个有趣的工作时长计算器》随着远程办公和弹性工作制的兴起,个人及团队对于工作时长的准确统计需求日益增长,本文将使用Python和PyQt5打造一个工作时长计算器,感兴趣的小伙伴可... 目录概述功能介绍界面展示php软件使用步骤说明代码详解1.窗口初始化与布局2.工作时长计算核心逻辑3

使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)

《使用Python和Matplotlib实现可视化字体轮廓(从路径数据到矢量图形)》字体设计和矢量图形处理是编程中一个有趣且实用的领域,通过Python的matplotlib库,我们可以轻松将字体轮廓... 目录背景知识字体轮廓的表示实现步骤1. 安装依赖库2. 准备数据3. 解析路径指令4. 绘制图形关键

python web 开发之Flask中间件与请求处理钩子的最佳实践

《pythonweb开发之Flask中间件与请求处理钩子的最佳实践》Flask作为轻量级Web框架,提供了灵活的请求处理机制,中间件和请求钩子允许开发者在请求处理的不同阶段插入自定义逻辑,实现诸如... 目录Flask中间件与请求处理钩子完全指南1. 引言2. 请求处理生命周期概述3. 请求钩子详解3.1