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) 扯淡: 送给各位一段话: 人生是一个不断做加法的过程 从赤条条无牵无挂的来 到学会荣辱羞耻 ...
随机推荐
- sql中检查时间是否重叠
先画一个时间轴,方便理解. 设新的时间块,开始时间为@BeginDate,结束时间为@EndDate.数据库中的数据为BeginDate和EndDate 这样可以直观的看出来,新的时间块插入进来,只需 ...
- 关系型数据库 VS 非关系型数据库
一.关系型数据库? 1.概念 关系型数据库是指采用了关系模型来组织数据的数据库.简单来说,关系模式就是二维表格模型. 主要代表:SQL Server,Oracle,Mysql,PostgreSQL. ...
- BZOJ5507 GXOI/GZOI2019旧词 (树链剖分+线段树)
https://www.cnblogs.com/Gloid/p/9412357.html差分一下是一样的问题.感觉几年没写过树剖了. #include<iostream> #include ...
- python多线程中join()方法和setDaemon()方法的区别
""" join()方法:主线程A中,创建了子线程B,并且在主线程中调用了B.join()方法,那么主线程A会在调用的地方等待,直到子线程B完成操作后,才可以接着往下执行 ...
- Linux 三剑客(Awk、Sed、Grep)
grep/egrep 主要作用:给搜索过滤出来的内容加上颜色和排除功能 常用参数 -V 打印grep的版本号 -E 解释PATTERN作为扩展正则表达式,也就相当于使用egrep. 或操作 -F 解释 ...
- 关于std::cin阻塞事件循环以及控制台命令输入功能的方案;
如果将std::cin建立在主线程,将阻塞主线程的所有事件循环,因而要保证事件循环不受影响,需要将std::cin放到 子线程中.同时,如果要实现能够强制终止std::cin阻塞, 可以通过强制终止线 ...
- idea中如何添加RunDashboard
在微服务开发中,往往要同时启动多个服务,这时候使用Run控制台难免会出错,并且不方便管理,这里推荐一个功能Run Dashboard idea中打开Run Dashboard的方法如下 view &g ...
- C++预编译头文件 – stdafx.h
预编译头文件的由来 也许请教了别的高手之后,他们会告诉你,这是预编译头,必须包含.可是,这到底是为什么呢?预编译头有什么用呢? 咱们从头文件的编译原理讲起.其实头文件并不神秘,其在编译时的作用,就是把 ...
- 记一次线上Java程序导致服务器CPU占用率过高的问题排除过程
博文转至:http://www.jianshu.com/p/3667157d63bb,转本博文的目的就是需要的时候以防忘记 1.故障现象 客服同事反馈平台系统运行缓慢,网页卡顿严重,多次重启系统后问题 ...
- [译]Ocelot - Quality of Service
原文 可以针对每个ReRoute设置对下游服务的熔断器circuit breaker.这部分是通过Polly实现的. 将下面的配置添加到一个ReRoute下面去. "QoSOptions&q ...