<!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. js定时器 实现提交成功提示

    应用场景: 用户评论后,在合适位置弹出“评论成功”,2秒钟后自动消失,提示用户评论成功. HTML: {#评论成功提示#} <div class="popup_con" st ...

  2. 【SEERC2018A】【XSY3319】Numbers

    给你一个数 \(n\),求有多少种方案能把 \(n\) 分成两个非零回文数 \((a,b)\) 之和. 两个方案不同当且仅当 \(a_1\neq a_2\). \(n\leq {10}^{18}\) ...

  3. hihoCoder #1954 : 压缩树(虚树)

    题意 有一棵 \(n\) 个节点且以 \(1\) 为根的树,把它复制成 \(m\) 个版本,有 \(q\) 次操作,每次对 \([l, r]\) 这些版本的 \(v\) 节点到根的路径收缩起来. 收缩 ...

  4. gnocchi resource批量删除

    openstack监控告警,采集数据,部署VMware-controller后,之前的celometer采集的大量数据需要删除 1.第一部获取未采集所有虚拟机的IP,并组成grep -v 多条件的格式 ...

  5. [oracle]解决ora-01034 oracle not available

    一般都是数据库连接中断了,按照链接重连即可. https://jingyan.baidu.com/article/5552ef47c73eef518ffbc908.html

  6. 配置GitHub Push自动触发Jenkins的构建

    这里以gitbook的项目为例,GitHub中的gitbook项目部署在Jenkins中,执行git push命令时自动执行Jenkins构建,其他项目只是最后的执行脚本不同 环境准备 安装Jenki ...

  7. bzoj1997 Planar

    题目链接 思路 首先以那个环为框架,把所有的边连出来.如果有两条边相交,那么就把其中一条放到环外面去. 如图: \((1,3)\)与\((2,5)相交,\)(1,4)\(与\)(2,5)相交.所以我们 ...

  8. go语言基础知识笔记（二）之数组和切片

    数组和切片知识用的也是比较多,的给我们工作带来很大的便利 (一) 数组 定义:在golang中数组的长度是不可变,数组存放要求是同一种数据类型 //golang中数组定义的四种方法1.先声明,后赋值 ...

  9. Angular记录(4)

    文档资料 箭头函数--MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_fun ...

  10. Dynamic Clock in Terminal.

    #!/bin/bash tput civis while [ 1 ] do tput clear # tput cup 10 20 info=$(date "+%Y-%m-%d %H:%M: ...