HTML5画布小dome八卦图
| <!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八卦图的更多相关文章
- [html5] canvas 绘图：八卦图
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title&g ...
- canvas画布——画八卦图
实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...
- 如何开发一个简单的HTML5 Canvas 小游戏
原文:How to make a simple HTML5 Canvas game 想要快速上手HTML5 Canvas小游戏开发?下面通过一个例子来进行手把手教学.(如果你怀疑我的资历, A Wiz ...
- HTML5 WebAudioAPI(四)--绘制频谱图2
绘制分析器数组所有数据.本文内容,承接上文 1.800宽度绘制 var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { ale ...
- 使用HTML5画布（canvas）生成阴影效果
来源:GBin1.com 使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影. var canvas = document.getElementById('shadowca ...
- 【转】HTML5的小知识点小集合
html5的小知识点小集合 html5知识 1. Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<h ...
- html5的小知识点小集合
html5的小知识点小集合 html5知识 1. Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于< ...
- 使用CSS达到阴阳八卦图等图形
CSS还是比較强大的,能够实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...
- html5实现饼图和线图
html5实现饼图和线图-我们到底能走多远系列(34) 我们到底能走多远系列(34) 扯淡: 送给各位一段话: 人生是一个不断做加法的过程 从赤条条无牵无挂的来 到学会荣辱羞耻 ...
随机推荐
- sax
<?xml version="1.0" encoding="UTF-8"?> <beauties> <beauty> < ...
- python3中的 zip()函数 和python2中的 zip()函数 的区别
python3中的 zip()函数 和python2中的 zip()函数 的区别: 描述: zip() 函数用于将可迭代对象作为参数,将对象中对应的元素打包成一个个元组,然后返回由这些元组组成的对象. ...
- IFE第一天
我也不知道自己到底能坚持多少天,希望66天可以坚持下来,flag在此. 第一天的知识大概就是了解一些基本概念. Web: 基于HTTP协议,利用浏览器访问网站. HTML 大概就是告诉浏览器我有一个什 ...
- vue stylus 格式化问题
IDE是vscode 安装了.vetur插件 由于stylus可以仅用缩进不用写大括号之类的,所以十分方便, 但有个问题,按alt shift F 格式化时,vetur这个插件会默认添加上正常css的 ...
- React 16 加载性能优化指南
关于 React 应用加载的优化,其实网上类似的文章已经有太多太多了,随便一搜就是一堆,已经成为了一个老生常谈的问题. 但随着 React 16 和 Webpack 4.0 的发布,很多过去的优化手段 ...
- Numpy的学习
Numpy numpy(Numerical Python extensions)是一个第三方的Python包,用于科学计算.这个库的前身是1995年就开始开发的一个用于数组运算的库.经过了长时间的发展 ...
- <02>labSQL的配置和使用方法
任务布置:制作简单地铁站点管理系统<2> 要求一:正确配置系统,建立基本正常的数据通道:要求二:实现地铁站点的登记,拥有查询功能: 正文: 今天介绍labview虚拟仪器软件中 labS ...
- 新系统添加sshkey/pexpect基本使用
Ansible密码认证 //配置Inventory [db] 10.10.10.12 10.10.10.162 [db:vars] #给db组下的主机设置变量 ansible_ssh_user=&qu ...
- NameNode与DataNode的工作原理剖析
NameNode与DataNode的工作原理剖析 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HDFS写数据流程 >.客户端通过Distributed FileSyst ...
- python之路（12）网络编程
前言 基于网络通信(AF_INET)的socket(套接字)实现了TCP/UDP协议 目录 基于TCP协议的socket 基于UDP协议的socket TCP协议下粘包现象及处理 使用socketse ...