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

目录

正文

canvas 实现

绘制黑色圆

完整DEMO

Style

Script

正文

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

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

我们这次不使用 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太极图案的资料请关注易知道(ezd.cc)其它相关文章!

推荐阅读

    excel怎么用乘法函数

    excel怎么用乘法函数,乘法,函数,哪个,excel乘法函数怎么用?1、首先用鼠标选中要计算的单元格。2、然后选中单元格后点击左上方工具栏的fx公

    excel中乘法函数是什么?

    excel中乘法函数是什么?,乘法,函数,什么,打开表格,在C1单元格中输入“=A1*B1”乘法公式。以此类推到多个单元。1、A1*B1=C1的Excel乘法公式

    标准差excel用什么函数?

    标准差excel用什么函数?,函数,标准,什么,在数据单元格的下方输入l标准差公式函数公式“=STDEVPA(C2:C6)”。按下回车,求出标准公差值。详细

    cad图形显示快捷键|cad视图显示快捷键

    cad图形显示快捷键|cad视图显示快捷键,,1. cad视图显示快捷键首先打开【CAD软件】,点击【视图】,轻点【重生成】,CAD中的重生成即刷新功能,或

    如何创建宽带连接(图形)

    如何创建宽带连接(图形),,很多时候,由于计算机的使用不当,计算机网络连接遭到破坏。此时,我们需要自己创建宽带连接。下面我们将教你如何创建宽

    如何将CPU与热图形卡匹配

    如何将CPU与热图形卡匹配,,当比尔·盖茨正式离开微软,Windows XP也宣布停止出售。虽然Windows Vista操作系统不能得到很多老玩家的青睐,Dire

    AMD和NVIDIA之间的图形大战

    AMD和NVIDIA之间的图形大战,,图形卡作为计算机主机的重要组成部分,承担着图形输出和显示的任务。今天,在娱乐、视听享受的追求,显卡的地位将

    excel常用函数都有哪些?

    excel常用函数都有哪些?,函数,哪些,常用,1、SUM函数:SUM函数的作用是求和。函数公式为=sum()例如:统计一个单元格区域:=sum(A1:A10)  统计多个