p5.js繪制旋轉(zhuǎn)的正方形

更新時(shí)間：2019年10月23日 16:06:16 作者：qq_43387305

這篇文章主要為大家詳細(xì)介紹了p5.js繪制旋轉(zhuǎn)的正方形，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

使用p5.js繪制旋轉(zhuǎn)的正方形，供大家參考，具體內(nèi)容如下

要還原的效果圖

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

首先建立畫布大小，按照比例應(yīng)該是5：3

function setup() {
 createCanvas(500, 300);
}

設(shè)定矩形繪制格式，以及邊線粗細(xì)

function setup() {
 createCanvas(500, 300);
 rectMode(100);
 strokeWeight(4);
}

讓我們根據(jù)畫布坐標(biāo)先把靜態(tài)的圖形畫出來

(關(guān)于顏色的rgb數(shù)據(jù)可以通過ps取色器獲得）

只需要用到rect（）進(jìn)行繪制即可

仔細(xì)觀察可以發(fā)現(xiàn)，圖中的矩形為圓角矩形，繪制圓角矩形可以直接在rect（）里加入四個(gè)角的弧度
以左一黑色矩形為例

rect(77.5,122.5, 55, 55, [5], [5], [5], [5]);

[ ]里的則是每個(gè)角的圓角弧度，按順序分別是左上，右上，左下，右下

經(jīng)過修改后的圖像

目前基本圖形已經(jīng)構(gòu)建好了，目前我們需要做的就是讓他旋轉(zhuǎn)起來
這里需要用到幾個(gè)函數(shù)

translate（）
rotate()

我們用translate()將旋轉(zhuǎn)中心設(shè)定為矩形中心，再調(diào)用rotate（）讓圖像旋轉(zhuǎn)起來
但是我們會(huì)發(fā)現(xiàn)一個(gè)問題，經(jīng)過設(shè)定后，啟動(dòng)程序，我們會(huì)發(fā)現(xiàn)整個(gè)圖形進(jìn)行了旋轉(zhuǎn)，這并沒有達(dá)到我們想要的效果，所以現(xiàn)在需要使用到push（）和pop（）兩個(gè)函數(shù)將矩形分隔開來

push();
angle=angle+0.01;
let c=angle+PI;
translate(100,150);
rotate(c);
stroke(255,255,255);
fill(0,0,0);
rect(-22.5-22.5, 55, 55, [5], [5], [5], [5]);
pop();

運(yùn)行即可讓左邊第一個(gè)矩形旋轉(zhuǎn)起來。要介紹的是，angle后所加的數(shù)值（此處為0.01）所代表的含義為旋轉(zhuǎn)速率的大小

如果需要反向旋轉(zhuǎn)，將rotate()中的參數(shù)轉(zhuǎn)換為負(fù)數(shù)即可

按照第一個(gè)矩形將另外三個(gè)矩形也更改過來，就可以得到圖中的效果啦！

最后完成的效果↓

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

使用bootstrap3開發(fā)響應(yīng)式網(wǎng)站
這篇文章主要為大家詳細(xì)介紹了使用bootstrap3開發(fā)響應(yīng)式網(wǎng)站的具體代碼，感興趣的小伙伴們可以參考一下
2016-05-05
JavaScript學(xué)習(xí)筆記（十）
今天學(xué)習(xí)的是window對(duì)象，還是有點(diǎn)用的。
2010-01-01
Echarts折線圖實(shí)現(xiàn)一條折線顯示不同顏色的方法
這篇文章主要給大家介紹了關(guān)于Echarts折線圖實(shí)現(xiàn)一條折線顯示不同顏色的相關(guān)資料,Echarts的折線圖可以通過設(shè)置series中的itemStyle屬性來改變折線的顏色,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-02-02
JavaScript中最常用的10種代碼簡(jiǎn)寫技巧總結(jié)
這篇文章主要總結(jié)了JavaScript中最常用的10種代碼簡(jiǎn)寫技巧的相關(guān)資料，其中包括三元操作符、短路求值簡(jiǎn)寫方式、聲明變量簡(jiǎn)寫方法、if存在條件簡(jiǎn)寫方法及JavaScript循環(huán)簡(jiǎn)寫方法等等，分別給出了詳細(xì)的示例代碼供大家參考，需要的朋友們下面來一起看看吧。
2017-06-06
一篇文章讓你輕松記住js的隱式轉(zhuǎn)化
這篇文章主要給大家介紹了如何通過一篇文章讓你輕松記住js的隱式轉(zhuǎn)化的相關(guān)資料,通過在各種情況下發(fā)生的隱式類型的例子,來詳細(xì)的了解隱式類型轉(zhuǎn)換的過程,需要的朋友可以參考下
2022-01-01
ES6中定義類和對(duì)象的方法示例
這篇文章主要介紹了ES6中定義類和對(duì)象的方法,結(jié)合實(shí)例形式分析了ES6中類的定義、繼承、靜態(tài)方法、靜態(tài)屬性等相關(guān)操作技巧,需要的朋友可以參考下
2019-07-07
讓JavaScript的Alert彈出框失效的方法禁止彈出警告框
彈出框難免會(huì)影響你的心情，所以通過以下代碼可將Js彈出框屏蔽掉，實(shí)現(xiàn)思路是對(duì)alert方法重寫
2014-09-09
HTML中用JS實(shí)現(xiàn)旋轉(zhuǎn)的圣誕樹
這篇文章介紹了HTML中用JS實(shí)現(xiàn)旋轉(zhuǎn)的圣誕樹，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-12-12
JS鮮為人知的問題之[] == ![]結(jié)果為true、而{} == !{}卻為false
這篇文章主要給大家介紹了關(guān)于JS鮮為人知的問題之[] == ![]結(jié)果為true、而{} == !{}卻為false的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-05-05
javascript抖動(dòng)元素的小例子
這篇文章介紹了javascript抖動(dòng)元素的小例子，有需要的朋友可以參考一下
2013-10-10