![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
P5.js
文章平均质量分 59
PGzxc
应用开发者
展开
-
P5.js开发之——设置
一 概述背景颜色相关(background/clear/clolorMode)填充相关(fill/noFill)描边相关(stroke/noStroke)擦除画布相关(erase/noErase)二 背景颜色相关(background/clear/clolorMode)2.1 属性说明No属性说明1background背景色2clear清除图形缓冲区内的像素3colorModecolorMode() 改变 p5.js 解读颜色资料的方式原创 2022-02-14 17:20:26 · 450 阅读 · 0 评论 -
P5.js开发之——环境
一 概述P5.js开发环境主要包含下面的内容:描述信息属性及常量操作及功能二 描述信息2.1 元素列表No属性说明1describe描述执行的方法或内容2describeElement描述执行的方法或内容3textOutput描述屏幕画布内容4gridOutput描述画布布局2.2 示例describe('pink square with red heart in the bottom right corner');bac原创 2022-02-09 16:44:00 · 575 阅读 · 0 评论 -
P5.js开发之——通过createCapture向页面中添加捕获摄像头
一 概述createCapture语法概述示例—捕获摄像头并显示createCapture需要设置有摄像头二 createCapture语法概述2.1 语法createCapture(type, [callback])2.2 说明捕获摄像头可以级联使用p5.Element的语法2.3 参数及返回值参数参数说明typeVIDEO(视频)、AUDIO(音频)callback加载后的回调函数返回值视频捕获 p5.Element三 示例3原创 2022-01-19 21:32:51 · 1316 阅读 · 1 评论 -
微信小程序开发之——Video第一次播放结束后播放按钮不再显示无法重复播放
一 现象小程序里使用video组件全屏播放时,设置了只显示中间的播放按钮。当视频播放完成后,不再显示播放按钮,无法再次播放二 原因—微信开放社区2.1 原因小程序官方bug,暂未修复2.2 截图三 如何解决—自己设置播放按钮3.1 过程视频播放前设置播放按钮点击播放按钮,播放视频,并隐藏播放按钮播放结束后,显示播放按钮3.2 代码布局文件<view class="container-camera"> <!--视频预览--> <vid原创 2022-01-19 15:43:34 · 5848 阅读 · 0 评论 -
P5.js开发之——通过createVideo向页面中添加视频
一 概述createVideo添加一个视频示例—本地视频添加及播放示例二 createVideo添加一个视频2.1 语法createVideo(src, [callback])2.2 说明添加一个本地或网络视频可以级联使用p5.Element的语法2.3 参数及返回值参数参数说明srcString|String[]:视频文件的路径callback事件触发时回调返回值p5.MediaElement三 示例3.1 代码let vid;原创 2022-01-18 16:26:23 · 3239 阅读 · 0 评论 -
P5.js开发之——通过createInput向页面中添加输入框
一 概述createInput语法概述示例—页面中添加input输入框并打印二 createInput语法概述2.1 语法createInput(value, [type])createInput([value])2.2 说明向页面中添加输入框可以级联使用p5.Element的语法2.3 参数及返回值参数参数说明value输入框中默认值type输入类型(text、password等)返回值p5.Element三 示例3.1 代码原创 2022-01-18 14:47:09 · 658 阅读 · 0 评论 -
P5.js开发之——通过createColorPicker向页面中添加颜色拾取器
一 概述createColorPicker语法介绍示例—创建颜色拾取器二 createColorPicker语法介绍2.1 语法createColorPicker([value])2.2 说明创建一个颜色拾取器可以级联使用p5.Element的语法2.3 参数及返回值参数value:元素的默认颜色返回值p5.Element三 示例3.1 代码let colorPicker;function setup() { createCanvas(100, 100)原创 2022-01-18 14:15:50 · 325 阅读 · 0 评论 -
P5.js开发之——通过createRadio向页面中添加单选框
一 概述createRadio语法介绍示例—Radio单选框二 createRadio语法介绍2.1 语法createRadio(containerElement, [name])createRadio(name)createRadio()2.2 说明向页面中添加单选框按钮可以级联使用p5.Element的语法2.3 参数及返回值参数参数说明containerElement一个容器 HTML 元素,可以是 div 或 spanname每原创 2022-01-18 13:38:18 · 343 阅读 · 0 评论 -
P5.js开发之——通过createSelect向页面中添加下拉框
一 概述createSelect语法介绍示例—下拉选择框示例二 createSelect语法介绍2.1 语法createSelect([multiple])createSelect(existing)2.2 说明在页面中添加下拉选择框可以级联使用p5.Element的语法2.3 参数及返回值参数参数说明multipleBoolean:下拉菜单展开显示existingDOM 选择元素2.4 方法option(name, [value原创 2022-01-18 11:25:41 · 773 阅读 · 0 评论 -
P5.js开发之——通过createCheckbox向页面中添加复选框
一 概述createCheckbox语法介绍示例—checkbox演示及信息打印二 createCheckbox语法介绍2.1 语法createCheckbox([label], [value])2.2 说明在页面中添加复选框可以级联使用p5.Element的语法2.3 参数及返回值参数参数说明labelcheckbox显示文字valuecheckbox默认值(是否选中)返回值p5.Element方法changed:选中、不选中时调原创 2022-01-18 10:44:39 · 190 阅读 · 0 评论 -
P5.js开发之——通过createButton向页面中添加按钮
一 概述createButton语法介绍示例—添加按钮和点击事件二 createButton语法介绍2.1 语法createButton(label, [value])2.2 说明在页面中添加按钮可以级联使用p5.Element的语法2.3 参数及返回值参数参数说明label按钮文字描述value按钮的value值(可选)返回值p5.Element三 示例—添加按钮和点击事件3.1 代码let button;function原创 2022-01-18 10:09:23 · 1552 阅读 · 0 评论 -
P5.js开发之——通过createSlider向页面中添加滑块并改变背景色
一 概述createSlider语法介绍示例—通过createSlider添加滑块,并改变背景色二 createSlider语法介绍2.1 语法createSlider(min, max, [value], [step])2.2 说明在页面中添加滑块可以级联使用p5.Element的语法2.3 参数及返回值参数参数说明min数字:最小值max数字:最大值value默认值step滑块步长(如果 step为 0,滑块将从最小值连续移原创 2022-01-18 09:51:07 · 620 阅读 · 0 评论 -
P5.js开发之——通过createA向页面中添加超链接
一 概述createA语法介绍示例—添加超链接二 createA语法介绍2.1 语法createA(href, html, [target])2.2 说明在页面中添加超链接可以级联使用p5.Element的语法2.3 参数及返回值参数参数说明href超链接地址html超链接文字描述target超链接打开方式(_blank, _self, _parent, _top)返回值p5.Element三 示例—添加超链接3.1 代码原创 2022-01-18 09:01:25 · 407 阅读 · 0 评论 -
P5.js开发之——通过createImg向页面中添加图像
一 概述createImg语法介绍示例—添加本地图形和网络图像二 createImg语法介绍2.1 语法createImg(src, alt, crossOrigin, [successCallback])2.2 说明添加图像(本地图像和网络图像)可以级联使用p5.Element的语法2.3 参数及返回值参数说明src图片路径alt指定图像不能正常显示后显示的替换文本crossOrigin跨域访问图像successCallback原创 2022-01-17 17:10:41 · 1470 阅读 · 0 评论 -
P5.js开发之——通过createP向页面中添加p5.Element元素
一 概述createP语法介绍createP示例二 createP语法介绍2.1 语法createP([html])2.2 说明创建一个段落(Paragraph)可以级联使用p5.Element的语法2.3 参数及返回值参数返回值创建段落(Paragraph)时默认的字符串p5.Element三 示例3.1 实例一代码(分开使用)function setup() { let p = createP('this is some text'原创 2022-01-17 16:40:46 · 254 阅读 · 0 评论 -
P5.js开发之——通过createP向页面中添加p5.Element元素
一 概述createP语法介绍createP示例二 createP语法介绍2.1 语法createP([html])2.2 说明创建一个段落(Paragraph)可以级联使用p5.Element的语法2.3 参数及返回值参数返回值创建段落(Paragraph)时默认的字符串p5.Element三 示例3.1 实例一代码(分开使用)function setup() { let p = createP('this is some text'原创 2022-01-17 09:15:34 · 196 阅读 · 0 评论 -
P5.js开发之——通过createDiv向页面中添加对象
一 概述createDiv语法介绍createDiv示例二 createDiv语法介绍2.1 语法createDiv([html])2.2 参数及返回值参数返回值创建div时默认的字符串p5.Element三 示例3.1 示例一代码function setup() { let div = createDiv('createDiv'); div.style('font-size', '16px'); div.position(10, 0)}原创 2022-01-13 14:23:57 · 577 阅读 · 0 评论 -
P5.js开发之——P5.Element介绍
一 概述向index.html导入sketch.js后,只是生成了空画板,里面并没有内容可以向sketch空画板中添加p5.Element内容的对象,渲染出内容sketch可以渲染的内容包含画布(canvas)、图片缓冲(graphics buffers)以及其他HTMLp5.Element不能直接调用,需要借助下面函数createCanvas, createGraphics, createDiv, createImg, createInput创建p5.Element对象二 p5.Eleme原创 2022-01-13 14:22:41 · 303 阅读 · 0 评论 -
P5.js开发之——字符串函数(10)
一 概述本文介绍操作字符串的几个函数:join:字符串连接符match:正则匹配nf:字符串格式化split:字符串分隔trim:删除空白字二 函数说明No函数返回值作用1join(list, separator)连接后的字符串将一数组的字符串合成一个字符串2match(str, regexp)搜寻到的字符串数组返回含有符合表达式的组合的字符串数组3matchAll(str, regexp)搜寻到的二维字符串数组返回含有符合表达式的原创 2021-12-15 14:27:55 · 1179 阅读 · 0 评论 -
P5.js开发之——基础Foundation(9)
一 概述本文介绍P5.js中的基础内容,包含变量声明关键字let和常量关键字const数据类型:boolean、string、number、object、class运算符:===、>、>=、<、<=语句:if-else、for、while、JSON函数定义:function内容打印:console二 变量声明关键字let和常量关键字const2.1 区别let关键字用于声明变量,声明的变量可以再次修改const关键字用于声明常量,不可修改2.2 示例原创 2021-12-01 16:28:51 · 1062 阅读 · 0 评论 -
P5.js开发之——日期和时间(8)
一 概述No函数说明1year()当时日期的年数2month()当时日期的月数3day()当天的日期天数4hour()当时时间的小时数5minute()当时时间的分钟数6second()当时时间的秒数7millis()自程序开始以来的毫秒数二 示例2.1 代码function setup() { createCanvas(500, 500);}function draw() { let y=原创 2021-11-30 10:45:26 · 1039 阅读 · 0 评论 -
P5.js开发之——数学和三角函数(7)
一 概述本文介绍P5.js中常见的数学计算公式三角函数计算公式二 数学计算公式2.1 计算公式列表No公式说明1abs(n)计算一个数字的绝对值2ceil(n)最靠近并大于或等于参数值的整数3constrain(n, low, high)一个数字于最低值与最高值之间4dist(x1, y1, z1, x2, y2, z2)两点之间的距离5exp(n)e^n6floor(n)最靠近并小于或等于参数值的整数7l原创 2021-11-30 10:44:48 · 576 阅读 · 0 评论 -
P5.js开发之——文字(6)
一 概述P5.js显示文字P5.js加载文字字体P5.js文字属性二 P5.js显示文字——text()2.1 语法text(str, x, y, [x2], [y2])2.2 参数说明属性类型说明str字符串\物件\数组\数字\布尔值该显示的字母数字符号x数字文字的 x 坐标y数字文字的 y 坐标x2数字文字格的宽度y2数字文字格的高度2.3 示例2.3.1 代码function draw() { le原创 2021-11-24 15:08:10 · 2244 阅读 · 0 评论 -
P5.js开发之——颜色及变化(5)
一 概述用于设置颜色的color方法对color进行颜色三原色提取的red(红)、green(绿)、blue(蓝)及alpha(透明度)对color进行hue(色调)、brightness(亮度)、saturation(饱和度)及lightness(光度)提取对color进行lerpColor(混合)二 color(设置颜色)2.1 color的格式语法示例说明color(gray, [alpha])color(65)0-255之间的数值color(v1原创 2021-10-29 08:37:06 · 2586 阅读 · 0 评论 -
P5.js开发之——借助p5.shape插件库绘制2D形状(4)
一 概述本文介绍借助于p5.shape库,绘制一些简单的几何形状,效果图如下:二 项目介绍2.1 项目地址p5.shape.js2.2 如何使用p5.shape:lib依赖文件,通过script导入example:示例文件,类似于sketch.js省略:index.html和p5.js三 p5.shape示例3.1 创建p5.js项目(vscode-p5 Project Create插件)将p5.shape:放到libs目录下,并在index.html中通过script导入将原创 2021-10-15 09:52:45 · 588 阅读 · 0 评论 -
P5.js开发之——2D图形绘制(3)
一 概述本文介绍通过P5.js绘制常见的2D形状编号图形函数1弧形arc()2椭圆形ellipse()3圆circle()4直线line()5点point()6四角形quad()7方形rect()8方形square()9三角形triangle()二 项目创建2.1 通过VSCode插件创建P5.js项目index.htmlsketch.js2.2 新建libs文件夹,并将p5.j原创 2021-10-13 16:13:05 · 1510 阅读 · 0 评论 -
P5.js开发之——开发环境(2)
一 概述本文介绍P5.js的两种开发环境:P5.jsweb编辑器:官方提供了页面编辑及运行预览环境本地开发环境(VScode):基于插件创建项目并进行开发二 P5.jsweb编辑器2.1 web编辑器地址https://editor.p5js.org/2.2 编辑器预览图2.3 文件介绍点击sketch.js左侧的折叠按钮,显示文件列表文件列表说明:index.html:项目入口文件,关联sketch.jssketch.js:图像绘制文件,有两个必要方法,setup设置原创 2021-10-13 10:19:45 · 1770 阅读 · 0 评论 -
P5.js开发之——介绍(1)
一 概述p5.js 是一个JavaScript的函数库它在制作之初就和Processing有同样的目标。就是让艺术家,设计师,教育工作者和编程初学者能够很容易,很轻松地学习和使用程序设计利用插件库你可以很方便地与其他html5元素(如文本,输入框,视频,摄像头和音频)进行交互二 P5插件库2.1 核心插件库编号插件库功能1p5.sound音频输入、播放、分析及合成功能2p5.accessibility视力障碍者能够更容易接触 p5 画布2.2 社区原创 2021-10-12 17:36:22 · 556 阅读 · 0 评论