前端JS實現(xiàn)太極圖案圖文示例

更新時間：2022年09月22日 16:13:56 作者：隨便起一個名字吧

這篇文章主要為大家介紹了前端JS實現(xiàn)太極圖案圖文示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

本篇我們實現(xiàn)一個看似復(fù)雜毫無頭緒，但實際上簡單無比的圖形，就是下圖的太極圖案

剛看到這個圖案時候可能毫無頭緒，因為各種圓弧，在實現(xiàn)時甚至都不知道應(yīng)該用什么函數(shù)，但如果我們換一種樣式，看起來是不是簡單很多：

我們這次不使用 HTML + CSS 實現(xiàn)該圖案，改用 canvas 來弄。

canvas 實現(xiàn)

<canvas id="canvas" width="600" height="600"></canvas>

為了方便后續(xù)繪制，我們可以將 canvas 的坐標(biāo)原點從左上角移到 canvas 的中心點

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.translate(canvas.width / 2, canvas.height / 2);

首先我們繪制右側(cè)的半圓，arc 方法的入?yún)⒊藞A心、半徑、弧度外，還可以設(shè)置是順時針還是逆時針的方式從從開始角度畫到結(jié)束角度。

// 半徑
const radius = 150;
// 繪制右邊的半圓
ctx.beginPath();
ctx.fillStyle = '#fff';
// false 表示順時針旋轉(zhuǎn)
ctx.arc(0, 0, radius, -90 * Math.PI / 180, 90 * Math.PI / 180, false)
ctx.fill();

按照同樣的方式，我們完成左側(cè)的黑色半圓

// 繪制左邊的半圓
ctx.beginPath();
ctx.fillStyle = '#000';
// 順時針旋轉(zhuǎn)
ctx.arc(0, 0, radius, -90 * Math.PI / 180, 90 * Math.PI / 180, true)
ctx.fill();

繪制黑色圓

下面我們繪制下面的黑色圓，黑色圓的 Y 軸其實就是半徑的一半

// 繪制下面的黑色圓
ctx.beginPath();
ctx.fillStyle = '#000';
ctx.arc(0, radius / 2, radius / 2, 0, 360 * Math.PI / 180);
ctx.fill();

而上面白色圓的 Y 軸也同樣是半徑的一半，只不過是負(fù)數(shù)

// 繪制上面的白色圓
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.arc(0, -radius / 2, radius / 2, 0, 360 * Math.PI / 180);
ctx.fill();

看著是不是有那么點感覺了？剩下的就簡單很多了，依照兩個小圓，在同樣的圓心畫兩個更小的圓：

// 繪制白色小點
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.arc(0, radius / 2, 10, 0, 360 * Math.PI / 180);
ctx.fill();
// 繪制黑色小點
ctx.beginPath();
ctx.fillStyle = '#000';
ctx.arc(0, -radius / 2, 10, 0, 360 * Math.PI / 180);
ctx.fill();

如此便實現(xiàn)我們最終的效果。

完整DEMO

Style

*, *::before, *::after {
  margin: 0;
  padding: 0;
}
canvas {
  border: 1px solid #eee;
  background: #ccc;
}

Script

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.translate(canvas.width / 2, canvas.height / 2);
// 半徑
const radius = 150;
// 繪制右邊的半圓
ctx.beginPath();
ctx.fillStyle = '#fff';
// 順時針旋轉(zhuǎn)
ctx.arc(0, 0, radius, -90 * Math.PI / 180, 90 * Math.PI / 180, false)
ctx.fill();
// 繪制左邊的半圓
ctx.beginPath();
ctx.fillStyle = '#000';
// 順時針旋轉(zhuǎn)
ctx.arc(0, 0, radius, -90 * Math.PI / 180, 90 * Math.PI / 180, true)
ctx.fill();
// 繪制下面的黑色圓
ctx.beginPath();
ctx.fillStyle = '#000';
ctx.arc(0, radius / 2, radius / 2, 0, 360 * Math.PI / 180);
ctx.fill();
// 繪制白色小點
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.arc(0, radius / 2, 10, 0, 360 * Math.PI / 180);
ctx.fill();
// 繪制上面的白色圓
ctx.beginPath();
ctx.fillStyle = '#fff';
ctx.arc(0, -radius / 2, radius / 2, 0, 360 * Math.PI / 180);
ctx.fill();
// 繪制黑色小點
ctx.beginPath();
ctx.fillStyle = '#000';
ctx.arc(0, -radius / 2, 10, 0, 360 * Math.PI / 180);
ctx.fill();

以上就是前端JS實現(xiàn)太極圖案圖文示例的詳細內(nèi)容，更多關(guān)于前端JS太極圖案的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: