当前位置： 首页 > news >正文

p5.js画布操作实战：创建，绑定指定元素，动态调整大小，隐藏滚动条，删除画布

news 2025/7/10 8:30:52

文章简介

之前在 《p5.js 光速入门》 里粗略讲过一下如何使用 p5.js 创建画布。

这次要介绍几个 p5.js 提供的画布相关的方法。

  • 创建画布时的相关配置。
  • 让画布绑定指定元素。
  • 重置画布大小。
  • 删除画布。

学习本文前你需要具备一点 p5.js 的知识，想了解的请查看 《p5.js 光速入门》。



创建画布

在 p5.js 里创建画布的方法叫 createCanvas，但其实如果你不使用该方法一样可以创建画布。

如果你使用了p5.js 的 setup() 或者 draw() 之类的生命周期函数，它们也会默认在页面上创建一个画布。

file

function setup() {background(123)
}

这是 p5.js 默认的动作，画布在不指定宽高时，会默认以 100px * 100px 的尺寸进行展示。


如果你想自定义画布宽高，可以使用 createCanvas(width, height) 方法传入宽高的值。

file

function setup() {createCanvas(300, 200)background(123)
}

在 《p5.js 3D图形-立方体》 里有介绍渲染 3D 图形时可以在 createCanvas() 传入 WEBGL 参数，有兴趣的工友可以去看看。



让画布绑定指定元素

使用前面提到的方法创建画布，p5.js 默认会帮我们把画布添加到 <body> 标签的最后面。如下图所示。

file


如果希望把画布添加进指定的页面元素里，可以这么做：

  1. 获取页面指定元素
  2. 使用 createCanvas 创建画布并返回画布对象
  3. 将画布添加到页面的指定元素里

file

<div>d1</div>
<div id="d2"></div>
<div>d3</div><script>
function setup() {// 【步骤1】let divElement = document.getElementById('d2')// 【步骤2】let canvas = createCanvas(300, 200)// 【步骤3】canvas.parent(divElement)background(123)
}
</script>

这个例子中，首先在页面创建3个 <div> ，然后把画布插入到第2个 <div> 里。

canvas.parent() 方法可以指定画布的父元素，传入的参数就是父元素对象。



让画布充满整个页面

通过前面的例子我们知道使用 createCanvas(width, height) 可以设置画布的宽高。

我们可以使用 window.innerWidth 和 window.innerHeight 获取页面的宽高，这是原生知识点。

其实 p5.js 也提供了一些常用的常量，比如要获取页面宽高，可以使用 windowWidth 和 windowHeight。

我们将这两个常量传入 createCanvas 就能创建一个和页面宽高一样的画布。

file

function setup() {createCanvas(windowWidth, windowHeight)background(123)
}

但视力好的工友应该已经发现了，用这招会导致滚动条出现。

有开发经验的工友可能知道 <body> 这个根标签是有默认的 margin，如果将 <body> 的 margin 设置为 0 是不是就能解决这个问题呢？

file

<style>html, body {margin: 0;padding: 0;}
</style><script>
function setup() {createCanvas(windowWidth, windowHeight)background(123)
}
</script>

这么做问题只能解决一半，只看页面左上角的话确实把白边去掉了。但还是出现滚动条。


真正的解决方案是：

  1. 把 body 的 margin 设置为 0。
  2. 把画布的 display 设置为 block。

file

我们可以在创建画布之后再将它的 display 设置为 block，代码如下所示：

<style>html, body {margin: 0;padding: 0;}
</style><script>
function setup() {let canvas = createCanvas(windowWidth, windowHeight)canvas.style('display', 'block')background(123)
}
</script>


重置画布大小

学会了前面几招，接下来可能就会遇到缩放浏览器时画布尺寸不会跟随缩放。

预览图的gif体积比较大，稍等一下～

file


此时我们可以使用 p5.js 提供的 windowResized 方法监听浏览器缩放，然后通过 resizeCanvas(width, height) 方法修改画布尺寸。

看好啦：

file

<style>html, body {margin: 0;padding: 0;}
</style><script>
let canvas = nullfunction setup() {let canvas = createCanvas(windowWidth, windowHeight)canvas.style('display', 'block')background(123)
}// 监听浏览器窗口变化
function windowResized() {// 重置画布尺寸resizeCanvas(windowWidth, windowHeight)background(123)
}
</script>

除了设置画布宽度，有时候可能还要动态设置画布的位置。

设置画布位置的方法是 position(x, y) ，有需要的工友自己试试吧～



删除画布

在下一篇文章我会介绍如何使用 p5.js 创建视频元素，此时需要隐藏 canvas 元素，不然它会在页面占位。

这种情况就需要使用 noCanvas() 方法。

这个方法在需要时直接调用即可，我就不再录屏展示了。

noCanvas()

推荐阅读

👍《p5.js 光速入门》

👍《p5.js 3D图形-立方体》

👍《p5.js 变换操作》

👍《p5.js map映射》

👍《p5.js 到底怎么设置背景图？》

👍《p5.js 开发点彩画派的绘画工具》


点赞 + 关注 + 收藏 = 学会了 代码仓库

相关文章：

p5.js画布操作实战：创建，绑定指定元素，动态调整大小，隐藏滚动条，删除画布

文章简介 之前在 《p5.js 光速入门》 里粗略讲过一下如何使用 p5.js 创建画布。 这次要介绍几个 p5.js 提供的画布相关的方法。 创建画布时的相关配置。让画布绑定指定元素。重置画布大小。删除画布。 学习本文前你需要具备一点 p5.js 的知识&#xff0c;想了解的请查看 《p…...

编程日记 2023/10/28 4:20:02

vue手动拖入和导入excel模版

1.列表按钮 <el-button click“importExcel(scope.row.id)” size“small” type“text”>导入excel模版 2.按钮弹框 3.data定义数据 data () { return { projectId: ‘’, importDialogVisible: false, fileList: [], //手动上传 upload_file: ‘’, //导入excel模版…...

编程日记 2023/10/28 4:18:59

Linux下导出dump文件(Oracle和PG数据)

dump文件可以快速的导入导出&#xff0c;所以在数据量较大的情况下用其他方法导出数据都不如dump。 不管是什么数据库&#xff0c;第一步都需要登录Oracle用户 su - oracle登录之后可以选择导出文件到当前目录 Oracle数据库导出指定表&#xff1a; exp 数据库用户名/密码lo…...

编程日记 2023/10/28 4:16:57

TSINGSEE青犀睡岗离岗检测算法——确保加油站安全运营

众所周知&#xff0c;加油站是一个需要24小时营业的场所&#xff0c;由于夜间加油人员较少&#xff0c;员工极易处于疲劳或者睡眠状态&#xff0c;为保障安全和效率&#xff0c;通过TSINGSEE青犀睡岗离岗检测算法在加油站场景中&#xff0c;可以及时发现工作人员的疲劳状况&…...

编程日记 2023/10/28 4:15:54

gd32部分映射1/2，完全映射，备用功能选择等

一、重映射与部分映射问题 参考相应用户手册&#xff1b; 打开&#xff1a;I/O 重映射功能和调试配置&#xff1b; AFIO 端口配置寄存器 0&#xff08;AFIO_PCF0&#xff09;&#xff1b; AFIO 端口配置寄存器 1&#xff08;AFIO_PCF1&#xff09;&#xff1b; 【e.g】以定时器…...

编程日记 2023/10/28 4:14:54

如何高效自学（黑客技术）方法——网络安全

如果你想自学网络安全&#xff0c;首先你必须了解什么是网络安全&#xff01;&#xff0c;什么是黑客&#xff01;&#xff01; 1.无论网络、Web、移动、桌面、云等哪个领域&#xff0c;都有攻与防两面性&#xff0c;例如 Web 安全技术&#xff0c;既有 Web 渗透2.也有 Web 防…...

编程日记 2023/10/28 4:13:51

K8S基础架构租赁（Lease ）

分布式系统通常需要租约(leases)&#xff0c;租约提供了锁定共享资源和在一组成员之间协调活动的机制。 在Kubernetes中&#xff0c;租约的概念由协调(k8s.io) API组中的Lease对象表示。 在Kubernetes中&#xff0c;Lease对象用于协调集群中的节点和组件之间的通信和协作。例如…...

编程日记 2023/10/28 4:12:50

vue使用smooth-signature实现移动端电子签字，包括横竖屏

vue使用smooth-signature实现移动端电子签字&#xff0c;包括横竖屏 1.使用smooth-signature npm install --save smooth-signature二.页面引入插件 import SmoothSignature from "smooth-signature";三.实现效果 四.完整代码 <template><div class&quo…...

编程日记 2023/10/28 4:11:49

K8s概念汇总-笔记

目录 1.Master 1.1在Master上运⾏着以下关键进程 2.什么是Node? 1.2在每个Node上都运⾏着以下关键进程 3.什么是 Pod ? 4. 什么是Label &#xff1f; 5.Replication Controller 6.Deployment 6.1Deployment的典型场景&#xff1a; 7.Horizontal Pod Autoscaler TODO…...

编程日记 2023/10/28 4:10:48

小程序设计基本微信小程序的校园生活助手系统

项目介绍 通篇文章的撰写基础是实际的应用需要&#xff0c;然后在架构系统之前全面复习大学所修习的相关知识以及网络提供的技术应用教程&#xff0c;以校园生活助手系统的实际应用需要出发&#xff0c;架构系统来改善现校园生活助手系统工作流程繁琐等问题。不仅如此以操作者…...

编程日记 2023/10/28 4:08:46

程序包com.sun.xml.internal.bind.marshaller不存在

程序包com.sun.xml.internal.bind.marshaller不存在 需要引入的依赖 <dependency><groupId>org.jetbrains.kotlin</groupId><artifactId>kotlin-stdlib</artifactId><version>1.3.50</version></dependency><dependency&g…...

编程日记 2023/10/28 4:07:45

Docker 入门

What - 什么是容器 容器是一种轻量级、可移植、自包含的软件打包技术&#xff0c;使应用程序可以在几乎任何地方以相同的方式运行。开发人员在自己笔记本上创建并测试好的容器&#xff0c;无须任何修改就能够在生产系统的虚拟机、物理服务器或公有云主机上运行。容器与虚拟机谈…...

编程日记 2023/10/28 4:05:42

Arduino驱动ME007-ULS防水测距模组（超声波传感器）

目录 1、传感器特性 2、控制器和传感器连线图 3、驱动程序 ULS型超声波传感器，是采用一体化防水探头设计而成的一款高性能的测距传感器，采用超声波回拨测距原理，运用精准的时差测量技术测量非接触式传感器与目标物体的之间的距离。对于透明物体或有色物体，金属物体，非金…...

编程日记 2023/10/28 4:04:41

docker容器怎么设置开机启动

docker容器怎么设置开机启动 docker服务器、以及容器设置自动启动 回到顶部 一、docker服务设置自动启动 说明&#xff1a;适用于yum安装的各种服务 查看已启动的服务 systemctl list-units --typeservice 查看是否设置开机启动 systemctl list-unit-files | grep enable 设…...

编程日记 2023/10/28 4:03:37

基于springboot实现校园交友网站管理系统项目【项目源码+论文说明】

基于springboot实现校园交友网站管理系统演示 摘要 随着信息技术和网络技术的飞速发展&#xff0c;人类已进入全新信息化时代&#xff0c;传统管理技术已无法高效&#xff0c;便捷地管理信息。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生…...

编程日记 2023/10/28 4:02:37

支付宝证书到期更新完整过程

如果用户收到 支付宝公钥证书 到期通知后&#xff0c;可以根据如下指引更新证书 确认上传成功后就会生成新的证书&#xff0c;把新的证书替换到生产环境就可以了...

编程日记 2023/10/28 4:01:35

Linux 云服务器磁盘挂载简介

云服务器磁盘挂载 一、挂载须知 一般涉及工具或命令&#xff1a;fdisk/gdisk/parted等挂载&#xff08;mounting&#xff09;是指由操作系统使一个存储设备&#xff08;诸如硬盘、CD-ROM或共享资源共享资源上的计算机文件和目录可供用户通过计算机的文件系统访问的一个过程。…...

编程日记 2023/10/28 3:59:31

LeetCode--3.无重复字符的最长子串

1 题目描述 给定一个字符串 s , 请你找出其中不含有重复字符的 最长子串 的长度 示例 1: **输入:** s "abcabcbb" **输出:** 3 **解释:** 因为无重复字符的最长子串是 "abc", 所以其长度为 3示例 2: **输入:** s "bbbbb" **输出:** 1 **解…...

编程日记 2023/10/28 3:58:30

iOS调试技巧——使用Python 自定义LLDB

一、类介绍 在使用Python 自定义LLDB之前&#xff0c;先了解一下LLDB的一些类型 SBTarget 正在被调试的程序SBProcess 和程序关联的具体的进程SBThread 执行的线程SBFrame 和线程关联的一个栈帧SBVariable 变量&#xff0c;寄存器或是一个表达式 一般情况下&#xff0c;我们…...

编程日记 2023/10/28 3:57:26

经典卷积神经网络 - ResNet

ResNet是一种残差网络&#xff0c;咱们可以把它理解为一个子网络&#xff0c;这个子网络经过堆叠可以构成一个很深的网络。 我们一直在加深神经网络&#xff0c;但是加深不一定只会带来好处。 残差块 串联一个层改变函数类&#xff0c;我们希望能扩大函数类残差块加入快速通…...

编程日记 2023/10/28 3:55:24

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/7/10 2:35:35

脑机新手指南（八）：OpenBCI_GUI：从环境搭建到数据可视化（下）

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

编程新知 2025/7/8 9:04:09

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2025/7/9 12:59:42

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/7/7 15:10:39

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/7/10 6:13:46

Java入门学习详细版（一）

大家好&#xff0c;Java 学习是一个系统学习的过程&#xff0c;核心原则就是“理论 实践 坚持”&#xff0c;并且需循序渐进&#xff0c;不可过于着急&#xff0c;本篇文章推出的这份详细入门学习资料将带大家从零基础开始&#xff0c;逐步掌握 Java 的核心概念和编程技能。 …...

编程新知 2025/7/8 23:06:19

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

编程新知 2025/6/21 6:23:38

算法：模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

编程新知 2025/7/6 19:34:06

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

编程新知 2025/7/9 7:22:48

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2025/7/9 12:17:10