<!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8" />
  <title></title>
   
  <style type="text/css">
  #BAgua{
  width: 300px;
  height: 300px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  #mycanvas {
  animation: 2s zhuan infinite linear;
  }
  @keyframes zhuan {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
  }
  </style>
  </head>
  <body>
  <div id="BAgua">
  <canvas id="mycanvas" width="200" height="200"></canvas>
  </div>
  </body>
  </html>
  <script type="text/javascript">
  var bag=document.getElementById("mycanvas");
  var ctx =bag.getContext("2d");
   
  ctx.beginPath();//开始一条路径
  ctx.arc(100,100,100,0,Math.PI*2);//绘制原型
  ctx.stroke();
   
  ctx.beginPath();
  ctx.arc(100,100,100,Math.PI*0.5,Math.PI*1.5);
  ctx.fillStyle="black";
  ctx.fill();
   
  ctx.beginPath();
  ctx.arc(100,50,50,Math.PI*0.5,Math.PI*1.5);
  ctx.stroke();
  ctx.fillStyle="white";
  ctx.fill();
   
  ctx.beginPath();
  ctx.arc(100,150,50,Math.PI*0.5,Math.PI*1.5,true);
  ctx.stroke();
  ctx.fillStyle="black";
  ctx.fill();
   
  ctx.beginPath();
  ctx.arc(100,50,10,0,Math.PI*2);
  ctx.stroke();
  ctx.fillStyle="black";
  ctx.fill();
   
  ctx.beginPath();
  ctx.arc(100,150,10,0,Math.PI*2);
  ctx.stroke();
  ctx.fillStyle="white";
  ctx.fill();
   
   
  </script>
   

HTML5画布小dome八卦图的更多相关文章

  1. [html5] canvas 绘图：八卦图

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. canvas画布——画八卦图

    实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...

  3. 如何开发一个简单的HTML5 Canvas 小游戏

    原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...

  4. HTML5 WebAudioAPI(四)--绘制频谱图2

    绘制分析器数组所有数据.本文内容,承接上文 1.800宽度绘制 var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { ale ...

  5. 使用HTML5画布（canvas）生成阴影效果

    来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...

  6. 【转】HTML5的小知识点小集合

    html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<h ...

  7. html5的小知识点小集合

      html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于< ...

  8. 使用CSS达到阴阳八卦图等图形

    CSS还是比較强大的,能够实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...

  9. html5实现饼图和线图

    html5实现饼图和线图-我们到底能走多远系列(34) 我们到底能走多远系列(34) 扯淡: 送给各位一段话:     人生是一个不断做加法的过程     从赤条条无牵无挂的来     到学会荣辱羞耻 ...

随机推荐

  1. 4月22日MySQL学习

    前面学习的知识基本都是概念知识没有什么代码,然后还有图形界面来辅助学习. 今天学习了MySQL的存储引擎,最常用的两种 MYISAM:不支持事务,也不支持外键,但是访问速度快. INNODB:支持事务 ...

  2. 报错utf-8错误

    当python运行总报utf-8错误时, f = open('CI_CUSER_2019040116033031.txt')data_app = pd.read_csv(f)print(data_ap ...

  3. ubuntu14.04按照mysql5.7

    1.安装mysql5.5 https://www.cnblogs.com/zhuyp1015/p/3561470.html https://www.cnblogs.com/ruofengzhishan ...

  4. 在中断服务函数中使用FreeRTOS系统延时函数vTaskDelay导致看门狗复位的情况

    @2019-04-09 [问题] 控制程序工作一段时间异常重启 [分析] 经定位分析重启原因为看门狗复位导致 [解决] 经排查发现在中断服务函数中使用了FreeRTOS的系统时延函数vTaskDela ...

  5. 几道c/c++练习题

    1.以下三条输出语句分别输出什么?[C易] char str1[] = "abc"; char str2[] = "abc"; const char str3[ ...

  6. Docker 介绍及基础命令

    Docker 简介 Docker 是一个开源项目,诞生于 2013 年初,最初是 dotCloud 公司内部的一个业余项目.它基于 Google 公司推出的 Go 语言实现. 项目后来加入了 Linu ...

  7. Gradle里面两个 依赖管理插件，可以不用关心 具体jar版本号

    引用:https://spring.io/blog/2015/02/23/better-dependency-management-for-gradle Using the plugin with S ...

  8. 使用Docker+Jenkins自动构建部署

    环境 Windows 10 Docker Version 18.06.1-ce-win73 (19507) 运行jenkins 运行jenkins 容器 docker run -d --name ln ...

  9. Git首次配置

    用户身份配置 安装好Git后的第一步是设置用户名和电子邮件地址.这一步是很重要的,因为以后这将作为你每一次提交的个人信息,写入所创建的提交中,不可更改. git config --global use ...

  10. idea2017.2.2注册

    IntelliJ IDEA 2017.2 破解(注册) 2017年08月10日 11:13:45 筱进GG 阅读数:2849更多 个人分类: IntelliJ IDEA   下载IntelliJ ID ...