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画一个阴阳八卦图
Mar 09 HTML / CSS
你正在寻找的CSS3 动画技术
Jul 27 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
如何用css3实现switch组件开关的方法
Feb 09 HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 HTML / CSS
ivx平台开发之不用代码实现一个九宫格抽奖功能
Jan 27 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
php通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
yii2.0实现验证用户名与邮箱功能
2015/12/22 PHP
php使用正则验证中文
2016/04/06 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
javascript读取xml
2006/11/04 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
2013/11/25 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
javascript模块化简单解析
2016/04/07 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
React中的render何时执行过程
2018/04/13 Javascript
vue2.0 中使用transition实现动画效果使用心得
2018/08/13 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
axios如何取消重复无用的请求详解
2019/12/15 Javascript
jQuery实现手风琴效果(蒙版)
2020/01/11 jQuery
jQuery实现简单评论功能
2020/08/19 jQuery
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
浅谈Python里面小数点精度的控制
2018/07/16 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
介绍一下Make? 为什么使用make
2013/12/08 面试题
厂区绿化方案
2014/05/08 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL