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) 扯淡: 送给各位一段话: 人生是一个不断做加法的过程 从赤条条无牵无挂的来 到学会荣辱羞耻 ...
随机推荐
- 初探kafka streams
1.启动zookeeper zkServer.cmd 2.启动kafka kafka-server-start.bat d:\soft\tool\Kafka\kafka_2.12-2.1.0\conf ...
- odoo Model字段的参数
odoo Model字段的参数 class Field(object): """ The field descriptor contains the field defi ...
- ACM-自学之旅
分类 知识清单 数据结构 链式前向星 树状数组 线段树 线段树的区间合并 基于ST表格的RMQ 图论 最近公共祖先 树的直径.树的重心与树的点分治 树的最小支配集,最小点覆盖与最大独立集 求无向连通图 ...
- 07--STL序列容器（Array）
一:Array了解 array<T,N> 模板定义了一种相当于标准数组的容器类型.它是一个有 N 个 T 类型元素的固定序列.除了需要指定元素的类型和个数之外,它和常规数组没有太大的差别. ...
- 计算机网络(HTTP)之客户识别：cookie机制
什么是cookie? 承载用户相关信息的HTTP首部 cookie的工作原理 cookie的缺陷 一.什么是cookie? cookie是由服务器生成,发送给USER-Agent(一般是浏览器),(服 ...
- oldboy s21day15模块装饰器及其他应用
#!/usr/bin/env python# -*- coding:utf-8 -*- # 1.sys.path.append("/root/mods")的作用?"&qu ...
- docker常用命令总结
1.docker ps 查看当前正在运行的容器 2.docker ps -a 查看所有容器的状态 3.docker start/stop id/name 启动/停止某个容器 4.docker ...
- windows7 64位使用anaconda傻瓜式安装tensorflow
1.下载anaconda并一键安装 登录网页:https://www.anaconda.com/download/ 这里选择Python3.6 version 64-Bit Graphlcal Ins ...
- JAVA通过http访问其他服务端API
项目要实现这么一个功能,用户通过点击按钮,通过axios来访问python的API(算法,java不好做)得到一个结果存储到数据库并且返回到页面. 但是python不是在tomcat上面运行的,所以不 ...
- slim.arg_scope中python技巧
slim.arg_scope函数说明如下: Stores the default arguments for the given set of list_ops. For usage, please ...