龙空技术网

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

德育处主任pro 48

前言:

眼前看官们对“div添加背景图片怎么设置大小”大致比较重视,你们都想要学习一些“div添加背景图片怎么设置大小”的相关资讯。那么小编同时在网络上汇集了一些对于“div添加背景图片怎么设置大小””的相关知识,希望兄弟们能喜欢,大家一起来了解一下吧!

文章简介

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

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

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

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

创建画布

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

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

function setup() {  background(123)}

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

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

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

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

让画布绑定指定元素

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

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

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

<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 就能创建一个和页面宽高一样的画布。

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

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

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

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

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

真正的解决方案是:

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

我们可以在创建画布之后再将它的 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体积比较大,稍等一下~

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

看好啦:

<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 开发点彩画派的绘画工具》

点赞 + 关注 + 收藏 = 学会了

标签: #div添加背景图片怎么设置大小 #js设置div背景图片 #js获取元素宽度 #js获取元素宽度高度 #js中的位置和宽度怎么设置