<!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. CentOS7安装MySQL8.0图文教程

    1.下载 MySQL 所需要的安装包 网址:https://dev.mysql.com/downloads/mysql/ 2.Select Operating System: 选择 Red Hat , ...

  2. ie6下固定位置的实现

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. [BZOJ 1095] [ZJOI 2007] 捉迷藏

    Description 传送门 Solution 先将原树转化成点分树: 然后维护三个堆: \(c[i]\) 保存点分树中子树 \(i\) 中的黑色节点到 \(fa[i]\) 的距离: \(b[i]\ ...

  4. loj2880「JOISC 2014 Day3」稻草人

    题目链接:bzoj4237 ​ loj2880 考虑\(cdq\)分治,按\(x\)坐标排序,于是问题变成统计左下角在\([l,mid]\),右上角在\([mid+1,r]\)的矩形数量 我们先考虑固 ...

  5. 简单实现SSO

    方案一:原理:基于SSO Server 端的登录情况,跳转至SOO-client的各个端. 每次返回一个 ticker 随机票据值识别. 配置服务端 执行 :git clone https://git ...

  6. spring-webmvc-DispatcherServlet

    Spring Web MVC is the original web framework built on the Servlet API and has been included in the S ...

  7. Python模拟弹道轨迹

    http://www.itongji.cn/cms/article/articledetails?articleid=5029 最近美国把萨德系统部署到韩国,一时心血来潮就用python模拟最简单的弹 ...

  8. MapReduce-TextInputFormat 切片机制

    MapReduce 默认使用 TextInputFormat 进行切片,其机制如下 (1)简单地按照文件的内容长度进行切片 (2)切片大小,默认等于Block大小,可单独设置 (3)切片时不考虑数据集 ...

  9. Qt快速入门第三版下载

    找了半天才找到一个靠谱的: http://www.ddooo.com/softdown/111665.htm

  10. （七）File 文件的操作

    一.文件读写模式 1.文件的几种模式: 格式:f=open("文件名","模式",encode="utf-8") #文件的只读模式 f1=o ...