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

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

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

正文

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

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

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

canvas 實(shí)現(xiàn)

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

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

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

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

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

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

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

繪制黑色圓

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

// 繪制下面的黑色圓
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();

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

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

如此便實(shí)現(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';
// 順時(shí)針旋轉(zhuǎn)
ctx.arc(0, 0, radius, -90 * Math.PI / 180, 90 * Math.PI / 180, false)
ctx.fill();
// 繪制左邊的半圓
ctx.beginPath();
ctx.fillStyle = '#000';
// 順時(shí)針旋轉(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();
// 繪制白色小點(diǎn)
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();
// 繪制黑色小點(diǎn)
ctx.beginPath();
ctx.fillStyle = '#000';
ctx.arc(0, -radius / 2, 10, 0, 360 * Math.PI / 180);
ctx.fill();

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

您可能感興趣的文章: