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) 扯淡: 送给各位一段话: 人生是一个不断做加法的过程 从赤条条无牵无挂的来 到学会荣辱羞耻 ...
随机推荐
- java 枚举2
package com.wsy.test; public enum Color { RED("红色",1),GREEN("绿色",2),BLUE("蓝 ...
- python3的字符串和字节
Python3中内置类型bytes和str用法及byte和string之间各种编码转换 Python 3最重要的新特性大概要算是对文本和二进制数据作了更为清晰的区分.文本总是Unicode(16进制) ...
- PowerBi利用Python Script绕过ODBC来导入MongoDB数据
- sql语句基础
数据库库(DataBase):就是一个存储数据的仓库.为了方便数据的存储和管理,它将数据按照特定的规律存储在磁盘上.通过数据库管理系统,可以有效的组织和管理存储在数据库中的数据.SQL(Structu ...
- loj2880「JOISC 2014 Day3」稻草人
题目链接:bzoj4237 loj2880 考虑\(cdq\)分治,按\(x\)坐标排序,于是问题变成统计左下角在\([l,mid]\),右上角在\([mid+1,r]\)的矩形数量 我们先考虑固 ...
- 【BZOJ3999】[TJOI2015]旅游（Link-Cut Tree）
[BZOJ3999][TJOI2015]旅游(Link-Cut Tree) 题面 BZOJ 洛谷 题解 一道不难的\(LCT\)题(用树链剖分不是为难自己吗,这种有方向的东西用\(LCT\)不是方便那 ...
- 使用lambda表达式对相同属性的实体进行合并
List<CrmAuthorizedInfo> crmAuthorizedInfos = flowPlanInfoMapper.findAllByEncode(stationForm.ge ...
- Git如何合并一个已经在GitHub上提交但没有合并的Pull Request请求
步骤 进入Git仓库,执行curl -L https://github.com/<USER>/<REPO>/pull/<NO>.patch | git am
- Linux安装gitbook
安装g++ 默认centos7上是没有安装g++ 通过命令: $ yum -y install gcc openssl-devel gcc-c++ compat-gcc-34 compat-gcc-3 ...
- 项目经理的“时间管理法则”（内含10G项目管理书籍）
项目经理特别是大型项目的项目经理往往琐事缠身,好象每件事情都很重要都需要处理,如何在“百事缠身”的环境下,管理和充分利用好自己的时间,是困扰项目经理的一个大问题.有人会问,为什么我努力善用每分每秒,却 ...