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

文章简介

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

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

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

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



创建画布

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

如果你使用了p5.jssetup() 或者 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.innerWidthwindow.innerHeight 获取页面的宽高,这是原生知识点。

其实 p5.js 也提供了一些常用的常量,比如要获取页面宽高,可以使用 windowWidthwindowHeight

我们将这两个常量传入 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. bodymargin 设置为 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 开发点彩画派的绘画工具》


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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/120838.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java 进阶篇】Java Request 继承体系详解

在Java编程中&#xff0c;Request&#xff08;请求&#xff09;是一个常见的概念&#xff0c;特别是在Web开发中。Request通常用于获取来自客户端的信息&#xff0c;以便服务器能够根据客户端的需求提供相应的响应。在Java中&#xff0c;Request通常涉及到一系列类和接口&#…

CAS 机制的实现原理分析

在 synchronized 中很多地方都用到了CAS机制&#xff0c;它的叫法有很多&#xff0c;比如CompareAndSwap、CompareAndExchange、CompareAndSet&#xff0c;它是一个能够进行比较和替换的方法&#xff0c;这个方法能够在多线程环境下保证对一个共享变量进行修改时的原子性不变。…

CentOS 编译安装TinyXml2

安装 TinyXml2 Git 源码下载地址:https://github.com/leethomason/tinyxml2 步骤1&#xff1a;首先&#xff0c;你需要下载tinyxml2的源代码。你可以从Github或者源代码官方网站下载。并上传至/usr/local/source_code/ 步骤2&#xff1a;下载完成后&#xff0c;需要将源代码解…

『力扣刷题本』:合并两个有序链表(递归解法)

一、题目 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4]示例 2&#xff1a; 输入&#xff1a;l1 [], l2 [] 输出&#x…

Python---练习:使用for循环实现用户名+密码认证

案例&#xff1a; 用for循环实现用户登录 ① 输入用户名和密码 ② 判断用户名和密码是否正确&#xff08;usernamelaowang&#xff0c;passwordlw123&#xff09; ③ 登录仅有三次机会&#xff0c;超过3次会报错 思考&#xff1a; 用户登陆情况有3种: ① 用户名错误(此时…

Python OpenCV将n×n的小图拼接成m×m的大图

Python OpenCV将nn的小图拼接成mm的大图 前言前提条件相关介绍实验环境n \times n的小图拼接成m \times m的大图代码实现 前言 由于本人水平有限&#xff0c;难免出现错漏&#xff0c;敬请批评改正。更多精彩内容&#xff0c;可点击进入Python日常小操作专栏、OpenCV-Python小…

J2EE项目部署与发布(Windows版本)

一、单机项目 1.将项目共享到虚拟机 2.解压并将war包放入tomcat 3.运行tomcat并查看该项目的数据库配置 4.数据库导入脚本 先创建一个符合项目数据库配置的数据库名称 然后就是将项目脚本数据传输过去即可&#xff0c;如下&#xff1a; 项目数据传输过来了之后&#xff0c;我们…

分组卷积的思想神了

大家好啊&#xff0c;我是董董灿。 最近&#xff0c;分组卷积帮我解决了一个大忙&#xff0c;事情是这样的。 这几天遇到一个头疼的问题&#xff0c;就是要在某一芯片上完成一个神经网络的适配&#xff0c;这个神经网络中卷积居多&#xff0c;并且有一些卷积的通道数很大&…

React之服务端渲染

一、是什么 在SSR中 (opens new window)&#xff0c;我们了解到Server-Side Rendering &#xff0c;简称SSR&#xff0c;意为服务端渲染 指由服务侧完成页面的 HTML 结构拼接的页面处理技术&#xff0c;发送到浏览器&#xff0c;然后为其绑定状态与事件&#xff0c;成为完全可…

番外8.2 --- 后续

### 01&#xff1a;dd命令&#xff1a;在新挂载点创建swap文件大小10MB&#xff1b;&#xff08;dd if/dev/zero of/swap bs1024 count10240&#xff09; 02&#xff1a;给swap建立文件系统&#xff0c;将其分属到swap文件&#xff08;mkswap /swap&#xff1b; swapon /swap &…

【linux系统】服务器安装Pycharm

文章目录 安装pycharm步骤1. 进入pycharm官网2. 上传到服务器3. 安装过程 摘要&#xff1a;pycharm是Python语言的图形化开发工具。因为如果在Linux环境下的Python shell 中直接进行编程&#xff0c;其无法保存与修改&#xff0c;在大型项目当中这是很不方便的&#xff0c;而py…

KV STUDIO的安装与实践(一)

目录 什么是KV STUDIO&#xff1f; 如何安装KV STUDIO&#xff1f; 如何学习与使用KV STUDIO&#xff08;在现实中的应用&#xff09;&#xff1f; 应用一&#xff08;在现实生活中机器内部plc的读取与替换&#xff09; 读取 KV STUDIO实现显示器的检测&#xff01;&#…

Android拖放startDragAndDrop拖拽onDrawShadow动态添加View,Kotlin(3)

Android拖放startDragAndDrop拖拽onDrawShadow动态添加View&#xff0c;Kotlin&#xff08;3&#xff09; import android.content.ClipData import android.graphics.Canvas import android.graphics.Point import android.os.Bundle import android.util.Log import android.…

北邮22级信通院数电:Verilog-FPGA(7)第七周实验(1):带使能端的38译码器全加器(关注我的uu们加群咯~)

北邮22信通一枚~ 跟随课程进度更新北邮信通院数字系统设计的笔记、代码和文章 持续关注作者 迎接数电实验学习~ 获取更多文章&#xff0c;请访问专栏&#xff1a; 北邮22级信通院数电实验_青山如墨雨如画的博客-CSDN博客 关注作者的uu们可以进群啦~ 目录 方法一&#xff…

泛微OA之获取每月固定日期

文章目录 1.需求及效果1.1需求1.2效果 2. 思路3. 实现 1.需求及效果 1.1需求 需要获取每个月的7号作为需发布日期&#xff0c;需要自动填充1.2效果 自动获取每个月的七号2. 思路 1.功能并不复杂&#xff0c;可以用泛微前端自带的插入代码块的功能来实现。 2.将这需要赋值的…

LVS集群-NAT模式

集群的概念&#xff1a; 集群&#xff1a;nginx四层和七层动静分离 集群标准意义上的概念&#xff1a;为解决特定问题将多个计算机组合起来形成一个单系统 集群的目的就是为了解决系统的性能瓶颈。 垂直扩展&#xff1a;向上扩展&#xff0c;增加单个机器的性能&#xff0c;…

【java学习—九】工厂方法FactoryMethod(6)

文章目录 1. 概念2. 实际的应用 1. 概念 FactoryMethod 模式是设计模式中应用最为广泛的模式&#xff0c;在面向对象的编程中&#xff0c;对象的创建工作非常简单&#xff0c;对象的创建时机却很重要。 FactoryMethod 解决的就是这个问题&#xff0c;它通过面向对象的手法&…

BUUCTF zip伪加密 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 下载附件&#xff0c;得到一个zip压缩包。 密文&#xff1a; 解题思路&#xff1a; 1、刚开始尝试解压&#xff0c;看到了flag.txt文件&#xff0c;但需要解压密码。结合题目&#xff0c;确认这是zip伪加密&#…

Makefile 基础教程:从零开始学习

在软件开发过程中&#xff0c;Makefile是一个非常重要的工具&#xff0c;它可以帮助我们自动构建程序&#xff0c;管理程序依赖关系&#xff0c;提高开发效率。本篇博客将从基础开始&#xff0c;介绍Makefile的相关知识&#xff0c;帮助大家快速掌握Makefile的使用方法 Makefil…

Corel Products Keygen-X-FORCE 2023(Corel会声会影2023注册机)

Corel All Products Universal Keygens通用注册机是一款非常实用的激活工具&#xff0c;专门用于激活Corel全系列产品。尤其是被广泛使用的CorelDRAW作图软件和Corel VideoStudio会声会影视频编辑处理软件。小编也是一直关注由X-Force团队制作的注册机&#xff0c;目前已更新至…