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) 扯淡: 送给各位一段话: 人生是一个不断做加法的过程 从赤条条无牵无挂的来 到学会荣辱羞耻 ...
随机推荐
- 浅拷贝(Shallow Copy) VS 深拷贝(Deep Copy)
首先,深拷贝和浅拷贝针对的是对象类型(对象,数组,函数) 浅拷贝指的是只是拷贝了对象的引用地址,彼此之间高耦合,一个改变,另一个可能也随之改变: 深拷贝是指只是完整的将变量的值拷贝过来,是一个新的对象 ...
- linux 下修改etc/profile文件
etc/profile文件是只读的,直接用vi或gedit打开修改后是无法保存的.要修改profile,需要取得root权限,(使用gedit编辑) 1. su root 输入密码 进入root模 ...
- luogu P2194 HXY烧情侣
残忍的题面 我们来看这一道题,其实冗长的题目告诉我们一个核心——用tarjan tarjan是用来干什么呢?是用来求强连通分量(代码中指sc) 求出来又有什么用呢?每当我们求出一个强连通分量时,就去计 ...
- P2447 [SDOI2010]外星千足虫 (高斯消元)
题目 P2447 [SDOI2010]外星千足虫 解析 sol写到自闭,用文字描述描述了半个小时没描述出来,果然还是要好好学语文 用高斯消元求解异或方程组. 因为 \(奇数\bigoplus奇数=偶数 ...
- python学习day21 面向对象(三)嵌套/特殊方法
1.嵌套 类/方法/对象都可以当做变量或嵌套到其他类型中. 函数的参数可以是任意类型. 可哈希(不可变)数据类型可以做字典的key. 类和对象可以做字典的key. 2.特殊方法(8) __init__ ...
- termux
使用http服务,链接原服务器要挂vpn. apt edit-sources 如果提示 $ apt edit-sources e: Sub-process editor returned a n er ...
- noi.ac309 Mas的童年
题目链接 题面 题目描述 \(Mas\)完成了一天的工作,走在回家的路上,看着路边的景色,他想起来自己的童年. 许许多多的记忆交错,丝丝缕缕的牵扯着\(Mas\). 在回忆的深处,\(Mas\)想起来 ...
- JavaScript中new实现原理
JavaScript中new实现原理 1.创建一个空对象 obj 2.将该对象 obj 的原型链 __proto__ 指向构造函数的原型 prototype, 并且在原型链 __proto__ 上设置 ...
- Asp.netMVC模型
Model负责在View和控制器之间进行数据的传递:用户输入的内容封装为Model对象,发给Controller:要显示的数据有Controller放到Model中,然后扔给View去显示.Contr ...
- 使用Redis实现实时排行榜
游戏中存在各种各样的排行榜,比如玩家的等级排名.分数排名等.玩家在排行榜中的名次是其实力的象征,位于榜单前列的玩家在虚拟世界中拥有无尚荣耀,所以名次也就成了核心玩家的追求目标. 一个典型的游戏排行榜包 ...