怎么用JS實現(xiàn)太極圖案

這篇文章主要講解了“怎么用JS實現(xiàn)太極圖案”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用JS實現(xiàn)太極圖案”吧！

效果圖

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

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)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么用JS實現(xiàn)太極圖案這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！