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

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

news 2026/2/9 15:06:32

文章简介

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

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2026/1/4 2:33:39

2.Vue编写一个app

1.src中重要的组成 1.1main.ts // 引入createApp用于创建应用 import { createApp } from "vue"; // 引用App根组件 import App from ./App.vue;createApp(App).mount(#app)1.2 App.vue 其中要写三种标签 <template> <!--html--> </template>…...

编程新知 2026/1/31 6:04:01

跨链模式：多链互操作架构与性能扩展方案

跨链模式&#xff1a;多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈&#xff1a;模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展&#xff08;H2Cross架构&#xff09;&#xff1a; 适配层&#xf…...

编程新知 2026/2/5 14:15:13

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2026/1/29 17:06:33

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

编程新知 2025/7/7 22:33:57

Java 二维码

Java 二维码 **技术&#xff1a;**谷歌 ZXing 实现 首先添加依赖 <!-- 二维码依赖 --><dependency><groupId>com.google.zxing</groupId><artifactId>core</artifactId><version>3.5.1</version></dependency><de…...

编程新知 2025/9/6 16:22:45

算法：模拟

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

编程新知 2026/1/25 10:01:01

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2026/1/25 2:04:42

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

编程新知 2026/1/24 4:39:04