canvas绘制太极图的实现示例


Posted in HTML / CSS onApril 29, 2020

看到了很多人写的太极图案,自己也来搞一下,今天就来介绍一下

css样式代码

.animation{
  width: 800px;
  height: 800px;
  border: 1px solid #000;
}
#canvas{
  animation: rotate 6s linear infinite;  
}
/* 给太极图设置旋转动画 */
@keyframes rotate{
  0%{
    transform: none;
  }
  100%{
    transform: rotate(360deg);
  }
}

javascript代码

//文档加载完毕后执行函数
window.onload = function(){
  //获取画布对象
  var canvas = document.getElementById('canvas');
  //获取上下文对象
  var context = canvas.getContext('2d');
  //圆开始路径
  context.beginPath();
  //绘制最外层的大圆(黑色)
  context.arc(400, 400, 300, Math.PI / 180 * 0, Math.PI / 180 * 360);
  //将大圆填充为黑色
  context.fillStyle = '#000';
  context.fill();
  //绘制左半圆(白色)
  context.beginPath();
  context.arc(400, 400, 300, Math.PI / 180 * 90, Math.PI / 180 * 270);
  context.fillStyle = '#fff';
  context.fill(); 
  //绘制右半圆(黑色),会覆盖外层大圆,颜色一样。所以写不写都可以
  /* context.beginPath();
  context.arc(400, 400, 300, Math.PI / 180 * 270, Math.PI / 180 * 90);
  context.fillStyle = '#000';
  context.fill(); */
  //绘制左上半圆(黑色)
  context.beginPath();
  context.arc(400, 250, 150, Math.PI / 180 * 90, Math.PI / 180 * 270);
  context.fillStyle = '#000';
  context.fill(); 
  //绘制右下半圆(白色)
  context.beginPath();
  context.arc(400, 550, 150, Math.PI / 180 * 270, Math.PI / 180 * 90);
  context.fillStyle = '#fff';
  context.fill(); 
  //绘制左上小半圆(白色)
  context.beginPath();
  context.arc(400, 250, 35, Math.PI / 180 * 0, Math.PI / 180 * 360);
  context.fillStyle = '#fff';
  context.fill(); 
  //绘制右下小半圆(黑色)
  context.beginPath();
  context.arc(400, 550, 35, Math.PI / 180 * 0, Math.PI / 180 * 360);
  context.fillStyle = '#000';
  context.fill(); 
}

html代码

<div class="animation">
    <canvas id="canvas" width="800" height="800"></canvas>
  </div>

设置动画之后的太极图效果

canvas绘制太极图的实现示例

到此这篇关于canvas绘制太极图的实现示例的文章就介绍到这了,更多相关canvas太极图内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3 渐变(Gradients)之CSS3 线性渐变
Jul 08 HTML / CSS
CSS3弹性盒模型开发笔记(三)
Apr 26 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
HTML5 canvas画图并保存成图片的jcanvas插件
Jan 17 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
HTML5新增加的功能详解
Sep 05 HTML / CSS
HTML5之高度塌陷问题的解决
Jun 01 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
Apr 29 #HTML / CSS
HTML5调用手机发短信和打电话功能
Apr 29 #HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 #HTML / CSS
HTML5中的网络存储实现方式
Apr 28 #HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 #HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 #HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 #HTML / CSS
You might like
PHP遍历二维数组的代码
2011/04/22 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
PHP中overload与override的区别
2017/02/13 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
2013/12/19 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
全面解析Bootstrap中tab(选项卡)的使用方法
2016/06/06 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
利用PyInstaller将python程序.py转为.exe的方法详解
2017/05/03 Python
Python工厂函数用法实例分析
2018/05/14 Python
python按比例随机切分数据的实现
2019/07/11 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
全神贯注教学反思
2014/02/03 职场文书
土地转让协议书
2014/04/15 职场文书
优秀乡村医生事迹材料
2014/05/28 职场文书
2015政治思想表现评语
2015/03/25 职场文书
Python操作CSV格式文件的方法大全
2021/07/15 Python
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js
Python使用MapReduce进行简单的销售统计
2022/04/22 Python
SQL Server中锁的用法
2022/05/20 SQL Server