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属性box-shadow使用详细教程
Jan 21 HTML / CSS
css3实现一款模仿iphone样式的注册表单
Mar 20 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
CSS3弹性盒模型开发笔记(二)
Apr 26 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
May 09 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
CSS3实现文本垂直排列的方法
Jul 10 HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 HTML / CSS
HTML5无刷新改变当前url的代码
Mar 15 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 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 MsSql server时遇到的中文编码问题
2009/06/11 PHP
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
PHP调用Linux的命令行执行文件压缩命令
2013/01/27 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
2009/08/15 Javascript
Node.js 的异步 IO 性能探讨
2014/10/08 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
如何使用AngularJs打造权限管理系统【简易型】
2016/05/09 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
[36:43]NB vs Optic 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
Python matplotlib通过plt.scatter画空心圆标记出特定的点方法
2018/12/13 Python
PyCharm 2019.3发布增加了新功能一览
2019/12/08 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
python实现猜拳游戏项目
2020/11/30 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
Shop Apotheke瑞士:您的健康与美容网上商店
2019/10/09 全球购物
初三政治教学反思
2014/01/30 职场文书
新年联欢会主持词
2014/03/27 职场文书
学生上课说话检讨书
2014/10/25 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
毕业实习计划书
2015/01/16 职场文书
工作收入证明范本
2015/06/12 职场文书