這篇文章將為大家詳細講解有關(guān)p5.js如何繪制旋轉(zhuǎn)的正方形，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)是一家專注于成都做網(wǎng)站、成都網(wǎng)站建設(shè)和西部信息服務(wù)器租用的網(wǎng)絡(luò)公司，有著豐富的建站經(jīng)驗和案例。

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

要還原的效果圖

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

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

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

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

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

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

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

只需要用到rect（）進行繪制即可

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

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

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

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

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

translate（）
rotate()

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

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

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

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

最后完成的效果↓

關(guān)于“p5.js如何繪制旋轉(zhuǎn)的正方形”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

分享題目：p5.js如何繪制旋轉(zhuǎn)的正方形
路徑分享：http://chinadenli.net/article48/ihohhp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、服務(wù)器托管、云服務(wù)器、網(wǎng)站制作、網(wǎng)站排名、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)