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) 扯淡: 送给各位一段话: 人生是一个不断做加法的过程 从赤条条无牵无挂的来 到学会荣辱羞耻 ...
随机推荐
- windows 平台使用 VS2017 编译openssl源码
windows 平台使用 VS2017 编译openssl源码 1)依赖安装 安装 perl 脚本解释器 下载 http://libevent.net/download 安装 nasm 汇编器 C:\ ...
- HTML事件属性
1.常用窗口事件属性 属性 值 描述 onbeforeonload script 在文档加载之前运行脚本 onblur script 当窗口失去焦点时运行脚本 onerror script 当错误发生 ...
- win10双系统安装卸载ubuntu
安装 1. 官网下载需要安装的Ubuntu版本 2. 格式化U盘,用UltraISO软件将Ubuntu写入U盘 3. 设置电脑U盘启动,重启电脑安装,注意安装时关闭在线下载,否则会安装很久 4. 安装 ...
- Shodan的http.favicon.hash语法详解与使用技巧
在Shodan搜索中有一个关于网站icon图标的搜索语法,http.favicon.hash,我们可以使用这个语法来搜索出使用了同一icon图标的网站,不知道怎么用的朋友请参考我上一篇文章. 通过上一 ...
- 用ES6创建一个简单工厂模式
1 什么是工厂模式? 工厂模式是用来创建对象的一种最常用的设计模式.我们不暴露创建对象的具体逻辑,而是将将逻辑封装在一个函数中,那么这个函数就可以被视为一个工厂.工厂模式根据抽象程度的不同可以分为:简 ...
- Python 目录指引
1.0 Python 基础整合 1.1 变量 1.2 数据类型 1.3 基础语法 1.4 文件操作 1.5 函数 1.6 生成器 1.7 迭代器 1.8 装饰器 1.9 字符集 2.0 Python ...
- Equipment UVA - 1508（子集补集）
The Korea Defense and Science Institute, shortly KDSI, has been putting constant effort into newequi ...
- KDJ计算公式
计算方法编辑KDJ的计算比较复杂,首先要计算周期(n日.n周等)的RSV值,即未成熟随机指标值,然后再计算K值.D值.J值等.以n日KDJ数值的计算为例,其计算公式为n日RSV=(Cn-Ln)/(Hn ...
- 【CF1157F】Maximum Balanced Circle
题目大意:给定一个长度为 N 的序列,求是否能够从序列中选出一个集合,使得这个集合按照特定的顺序排成一个环后,环上相邻的点之间的权值差的绝对值不超过 1. 题解:集合问题与序列顺序无关,因此可以先将序 ...
- 超越村后端开发（3：安装djangorestframework+序列化+API开发前期准备）
1.安装djangorestframework 1.安装djangorestframework及其依赖包markdown.django-filter. pip install djangorestfr ...