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 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
May 20 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
Apr 23 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
AmazeUI 模态窗口的实现代码
Aug 18 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 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
example2.php
2006/10/09 PHP
PHP多维数组指定多字段排序的示例代码
2018/05/16 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
Jquery事件的连接使用示例
2013/06/18 Javascript
node.js中的fs.futimes方法使用说明
2014/12/17 Javascript
javascript实现全角与半角字符的转换
2015/01/07 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
JS实现双击屏幕滚动效果代码
2015/10/28 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
理解Javascript的call、apply
2015/12/16 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
2019/11/06 Javascript
JavaScript实现拖拽效果
2020/03/16 Javascript
详解JS函数防抖
2020/06/05 Javascript
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
Python编码类型转换方法详解
2016/07/01 Python
Django添加favicon.ico图标的示例代码
2018/08/07 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
详解Python3序列赋值、序列解包
2019/05/14 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
在Windows上安装和配置 Jupyter Lab 作为桌面级应用程序教程
2020/04/22 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
英国网上香水店:Fragrance Direct
2016/07/20 全球购物
会计实习期自我鉴定
2013/10/06 职场文书
电子专业推荐信范文
2013/11/18 职场文书
便利店投资创业计划书
2014/02/08 职场文书
民族精神月活动总结
2014/08/28 职场文书
幸福中国演讲稿
2014/09/12 职场文书
2014年材料员工作总结
2014/11/19 职场文书
六一亲子活动感想
2015/08/07 职场文书