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

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

news 2026/2/9 17:46:07

文章简介

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

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2026/1/30 0:00:28

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/11/18 21:31:41

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2026/2/4 16:23:56

Spring AI与Spring Modulith核心技术解析

Spring AI核心架构解析 Spring AI&#xff08;https://spring.io/projects/spring-ai&#xff09;作为Spring生态中的AI集成框架&#xff0c;其核心设计理念是通过模块化架构降低AI应用的开发复杂度。与Python生态中的LangChain/LlamaIndex等工具类似&#xff0c;但特别为多语…...

编程新知 2025/12/14 17:38:21

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

编程新知 2026/1/27 12:17:05

现有的 Redis 分布式锁库（如 Redisson）提供了哪些便利？

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

编程新知 2025/9/23 11:26:04

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2026/1/31 11:18:29

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

编程新知 2026/1/30 4:58:21

Python 训练营打卡 Day 47

注意力热力图可视化 在day 46代码的基础上&#xff0c;对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...

编程新知 2025/11/24 9:42:16

【堆垛策略】设计方法

堆垛策略的设计是积木堆叠系统的核心&#xff0c;直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法&#xff0c;涵盖基础规则、优化算法和容错机制&#xff1a; 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则&#xff1a; 大尺寸/重量积木在下&#xf…...

编程新知 2026/2/8 13:33:28