前端JS實現太極圖案圖文範例

2022-09-26 14:05:53

正文

本篇我們實現一個看似複雜毫無頭緒，但實際上簡單無比的圖形，就是下圖的太極圖案

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

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

canvas 實現

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

為了方便後續繪製，我們可以將 canvas 的座標原點從左上角移到 canvas 的中心點

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

首先我們繪製右側的半圓，arc 方法的入參除了圓心、半徑、弧度外，還可以設定是順時針還是逆時針的方式從從開始角度畫到結束角度。

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

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

// 繪製左邊的半圓
ctx.beginPath();
ctx.fillStyle = '#000';
// 順時針旋轉
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 軸也同樣是半徑的一半，只不過是負數

// 繪製上面的白色圓
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();

如此便實現我們最終的效果。

完整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';
// 順時針旋轉
ctx.arc(0, 0, radius, -90 * Math.PI / 180, 90 * Math.PI / 180, false)
ctx.fill();
// 繪製左邊的半圓
ctx.beginPath();
ctx.fillStyle = '#000';
// 順時針旋轉
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實現太極圖案圖文範例的詳細內容，更多關於前端JS太極圖案的資料請關注it145.com其它相關文章！