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

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

news 2026/5/27 7:48:59

文章简介

之前在 《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

PA100K数据集实战：从下载到结构化解析全流程

1. PA100K数据集初探&#xff1a;为什么选择它&#xff1f;如果你正在研究行人属性识别&#xff0c;PA100K绝对是个绕不开的宝藏数据集。这个数据集包含了10万张真实监控场景下的行人图像&#xff0c;每张图都标注了26种常见属性——从衣着风格&#xff08;比如是否穿T恤、裙子…...

编程新知 2026/5/26 3:15:58

销售怎么通过各种方法获取电话号码

第一种就是那个用爬虫电话号码&#xff0c;然后再打电话给客户。第二种是在别人的挪车电话看车挪车电话&#xff0c;然后再打电话找客户。第三就是。扫楼一顿顿的扫&#xff0c;第四就是这个那种商店&#xff0c;一个个的去问陌拜地推一个个的问店子要不要贷款&#xff0c;去问…...

编程新知 2026/5/26 1:13:04

基于Netburner NANO54415构建工业级嵌入式Web服务器：从硬件选型到广域监控实战

1. 项目概述&#xff1a;一个为广域与本地监控而生的嵌入式Web服务器如果你正在寻找一个能部署在野外、工厂角落或者任何需要远程数据采集与控制场景下的嵌入式Web服务器方案&#xff0c;并且对市面上那些要么性能孱弱、要么开发门槛极高的开发板感到厌倦&#xff0c;那么这个基…...

编程新知 2026/5/25 21:50:00

从安装到排错：手把手解决Linux服务器上Nacos启动失败的十大常见问题

从安装到排错&#xff1a;手把手解决Linux服务器上Nacos启动失败的十大常见问题当你在Linux服务器上部署Nacos时&#xff0c;是否遇到过启动失败却无从下手的困境&#xff1f;作为阿里巴巴开源的服务发现和配置管理平台&#xff0c;Nacos在微服务架构中扮演着重要角色。然而&am…...

编程新知 2026/5/25 21:47:59

告别Postman！用APIfox搞定接口测试+自动化，这份保姆级教程带你从环境配置到报告生成

从Postman到APIfox&#xff1a;接口测试自动化的高效迁移指南如果你还在为接口测试中的重复劳动和多环境切换头疼&#xff0c;是时候考虑从Postman迁移到APIfox了。作为一名经历过这个转型过程的开发者&#xff0c;我想分享一些实战经验&#xff0c;帮助你平滑过渡并最大化利用…...

编程新知 2026/5/25 21:15:34

终极指南：三步搞定Windows系统安卓APK文件安装，告别模拟器时代

终极指南&#xff1a;三步搞定Windows系统安卓APK文件安装&#xff0c;告别模拟器时代 【免费下载链接】APK-Installer An Android Application Installer for Windows 项目地址: https://gitcode.com/GitHub_Trending/ap/APK-Installer 还在为电脑无法直接运行手机应用…...

编程新知 2026/5/25 16:13:25

三分钟快速上手：FanControl让你的电脑风扇从此安静又高效

三分钟快速上手&#xff1a;FanControl让你的电脑风扇从此安静又高效 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending…...

编程新知 2026/5/25 15:37:41

框架组件识别：从版本号到利用链的渗透实战指南

1. 这不是“扫个版本号”那么简单&#xff1a;框架组件识别在真实渗透中的战略定位 很多人看到“框架组件识别”&#xff0c;第一反应是跑个whatweb、wappalyzer&#xff0c;截图发报告里写一句“识别到Spring Boot 2.6.3”&#xff0c;就算交差了。我干这行十多年&#xff0c;…...

编程新知 2026/5/25 14:27:48

MySQL全局ID生成实战：从自增主键到自定义Sequence的平滑升级方案与避坑指南

MySQL全局ID生成实战&#xff1a;从自增主键到自定义Sequence的平滑升级方案与避坑指南 当电商平台的日订单量突破百万时&#xff0c;技术团队突然发现系统开始频繁出现"Duplicate entry"错误——那些原本可靠的自增主键&#xff0c;在分库分表的环境下变成了数据一致…...

编程新知 2026/5/25 13:42:16

024、NPU指令集架构（ISA）概述：从CISC到VLIW

024、NPU指令集架构（ISA）概述：从CISC到VLIW 去年冬天调试一块国产NPU芯片的卷积算子，跑ResNet-50前向推理，死活比理论算力低了一个数量级。抓了三天波形，最后发现是指令发射槽的冲突——两条MAC指令争同一个数据总线，硬件自动插入三个空泡周期。那一刻我盯着逻辑分析仪…...

编程新知 2026/5/25 13:03:44