前端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太极图案的资料请关注我们其它相关文章!

时间: 2022-09-20

利用C语言的Cairo图形库绘制太极图实例教程

前言 可能许多人对直接用C语言绘图仍然停留在Turbo C的graphics.h年代,或许也有教育老化的原因,毕竟曾经的经典早已成往事,与其想尽各种办法寻找与其兼容的图形库,不如顺势拥抱灿烂的明天.Cario(http://cairographics.org/)是一个非常出色的2D图形库,著名的GTK+3.0完全采用Cario作为绘图引擎,由此可见它的强大和吸引力. Cario支持X Window,Quartz,Win32,image.buffers,PostScript,PDF和SVG文件等多

python turtle 绘制太极图的实例

效果如下所示: # -*- coding: utf-8 -*- import turtle # 绘制太极图函数 def draw_TJT(R):     turtle.screensize(800, 600, "green")  # 画布长.宽.背景色 长宽单位为像素     turtle.pensize(1)  # 画笔宽度     turtle.pencolor('black')  # 画笔颜色     turtle.speed(10)  # 画笔移动速度     TJT_colo

JS实现太极旋转思路分析

刚学了js的一些函数,所以做了一个太极的旋转.做完之后是上面这个样子的,是可以旋转的. 思路: 1.先做一个基准转盘,之后将元素都放在转盘上,跟随转盘动. 2.画两个半圆,主要属性是border-top-right-radius: 250px; 像素值为长边的一半. 3.然后画4个圆,以基准转盘为父元素,按照下面黑色圆一样的思路再画另外一边白色的圆,最后再在两个中等的圆上画两个小圆. 4.设置定时器: //旋转角度 var deg = 0 //设置定时器,100毫秒动一次 var tid = s

JS搜狐面试题分析

本文实例讲述了几道JS搜狐面试题.分享给大家供大家参考,具体如下: 一.实现一个遍历数组或对象里所有成员的迭代器. var each = function(obj, fn){ //+++++++++++答题区域+++++++++++ //+++++++++++答题结束+++++++++++ }; try{ var data1 = [4,5,6,7,8,9,10,11,12]; var data2 = { "a": 4, "b": 5, "c":

vue-cli3+typescript新建一个项目的思路分析

最近在用vue搭一个后台管理的单页应用的demo,因为之前只用过vue-cli2+javascript进行开发,而vue-cli3早在去年8月就已经发布,并且对于typescript有了很好地支持.所以为了熟悉新技术,我选择使用vue-cli3+typescript进行新应用的开发.这里是新技术的学习记录. 初始化项目 卸载老版本脚手架,安装新版本脚手架后,开始初始化项目.初始化的命令跟2.x版本的略有不同,以前是 vue init webpack project-name ,而现在是 vue

vue2.0的虚拟DOM渲染思路分析

1.为什么需要虚拟DOM 前面我们从零开始写了一个简单的类Vue框架(文章链接),其中的模板解析和渲染是通过Compile函数来完成的,采用了文档碎片代替了直接对页面中DOM元素的操作,在完成数据的更改后通过appendChild函数将真实的DOM插入到页面. 虽然采用的是文档碎片,但是操作的还是真实的DOM. 而我们知道操作DOM的代价是昂贵的,所以vue2.0采用了虚拟DOM来代替对真实DOM的操作,最后通过某种机制来完成对真实DOM的更新,渲染视图. 所谓的虚拟DOM,其实就是 用JS来模

jQuery.prototype.init选择器构造函数源码思路分析

一.源码思路分析总结 概要: jQuery的核心思想可以简单概括为"查询和操作dom",今天主要是分析一下jQuery.prototype.init选择器构造函数,处理选择器函数中的参数: 这个函数的参数就是jQuery()===$()执行函数中的参数,可以先看我之前写的浅析jQuery基础框架一文,了解基础框架后,再看此文. 思路分析: 以下是几种jQuery的使用情况(用于查询dom),每种情况都返回一个选择器实例(习惯称jQuery对象(一个nodeList对象),该对象包含查询

基于JS实现无缝滚动思路及代码分享

原理: 1.给ul一个绝对定位使其脱离文档流,left设置为0,把图片塞进ul里,编写一个"移动"函数,函数功能能够使ul的left以一个正速度向右跑动, 2.设置一个定时器,让"移动"函数每30(参数可变)毫秒执行一次 3.因为ul的长度会"跑"完,此时可以使ul的content也就是img增加一倍, oUl.innerHTML +=oUl.innerHTML; 4.此时因为ul的content增加,其width也会随着增大,根据实际项目展示图

jQuery.clean使用方法及思路分析

一.jQuery.clean使用方法jQuery.clean( elems, context, fragment, scripts );二.思路分析1.处理参数context,确保其为文档根节点document2.处理参数elems数组(循环遍历数组) 2.1.elem为数字,转换为字符串 2.2.elem为非法值,跳出本次循环 2.3.elem为字符串 2.4.字符串不存在实体编号或html标签,则创建文本节点 2.5.字符串为实体编号或html标签 复制代码 代码如下: 创建一个div元素并

jQuery.buildFragment使用方法及思路分析

一.jQuery.buildFragment使用方法 1.参数 jQuery.buildFragment( args, context, scripts );2.返回值 return { fragment: fragment, cacheable: cacheable }; 二.思路分析 1.处理context参数 根据传入到context参数值的不同,确保context为文档根节点document 2.限制可缓存条件 2.1.字符串小于512字节 2.2.字符串不存在option标签(克隆op

Linux NFS服务器安装与配置思路分析

一,nfs服务优缺点 NFS服务简介 NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,由Sun公司开发,于1984年向外公布.功能是通过网络让不同的机器.不同的操作系统能够彼此分享个别的数据,让应用程序在客户端通过网络访问位于服务器磁盘中的数据,是在类Unix系统间实现磁盘文件共享的一种方法. NFS 的基本原则是"容许不同的客户端及服务端通过一组RPC分享相同的文件系统",它是独立于操作系统,容许不同硬件及操作系统的系统共同进行

JS实现图片旋转动画效果封装与使用示例

本文实例讲述了JS实现图片旋转动画效果封装与使用.分享给大家供大家参考,具体如下: 核心封装代码如下: //图片动画封装 function SearchAnim(opts) { for(var i in SearchAnim.DEFAULTS) { if (opts[i] === undefined) { opts[i] = SearchAnim.DEFAULTS[i]; } } this.opts = opts; this.timer = null; this.elem = document.