前端JS实现太极图案图文示例

更新时间：2022年09月22日 16:13:56 作者：随便起一个名字吧

这篇文章主要为大家介绍了前端JS实现太极图案图文示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

正文

本篇我们实现一个看似复杂毫无头绪，但实际上简单无比的图形，就是下图的太极图案

刚看到这个图案时候可能毫无头绪，因为各种圆弧，在实现时甚至都不知道应该用什么函数，但如果我们换一种样式，看起来是不是简单很多：

我们这次不使用 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太极图案的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

JS异步观察目标元素方式完成分页加载
这篇文章主要为大家介绍了异步观察目标元素方式完成分页加载示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
详解HTML5 使用video标签实现选择摄像头功能
这篇文章主要介绍了详解HTML5 使用video标签实现选择摄像头功能的相关资料,希望通过本文能帮助到大家，实现这样的功能，需要的朋友可以参考下
2017-10-10
详解微信小程序设置底部导航栏目方法
这篇文章主要介绍了详解微信小程序设置底部导航栏目方法的相关资料,需要的朋友可以参考下
2017-06-06
微信小程序（十八）picker组件详细介绍
这篇文章主要介绍了微信小程序 picker组件详细介绍的相关资料,需要的朋友可以参考下
2016-09-09
浅谈克隆 JavaScript
这篇文章主要介绍了克隆 JavaScript,克隆又有浅克隆与深克隆，文章围绕JavaScript浅克隆与深克隆的相关资料展开具体内容,需要的朋友可以参考一下
2021-10-10
详解JavaScript实现简单的词法分析器示例
这篇文章主要为大家介绍了详解JavaScript实现简单的词法分析器示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
Three.js实现雪糕地球的使用示例详解
这篇文章主要为大家介绍了Three.js实现雪糕地球的使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
JS 4个超级实用的小技巧提升开发效率
JS有很多小技巧可以使代码更精简、更简单。今天主要分享4个技巧，在平时的工作中可以大大的缩短代码量和开发时间。,需要的朋友可以参考下面文章内容哟
2021-09-09
JavaScript流程控制(循环)
这篇文章主要介绍了JavaScript流程控(循环),在程序中，一组被重复执行的语句被称之为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句,更多详细内容请需要的小伙伴参考下面文章的具体介绍
2021-12-12
没有resolve及reject的Promise是否会造成内存泄露
这篇文章主要为大家介绍了一直没有resolve及reject的Promise是否会造成内存泄露的问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08