Html5 绘制旋转的太极图
采用Html5+JavaScript在Canvas中绘制旋转的太极图,如下图所示:
具体思路和绘制逻辑,在上图中已有说明,代码如下:
<script type="text/javascript"> //只画边框线,无填充
function bigCircle(ctx,x, y, r, st, end, w,oc) {
ctx.lineWidth = w;
ctx.beginPath();
ctx.arc(x, y, r, st, end, oc);
ctx.closePath();
ctx.stroke();
}
//有填充,画小圆,x,y表示大圆的圆心,r表示大圆的半径,w表示线宽,oc表示方向,l表示上下,d表示度数
function smallCircle(ctx, x, y, r, st, end, w, oc, l,d) {
var Angle = d * Math.PI / 180; //偏移角用弧度表示
ctx.lineWidth = w;
ctx.beginPath();
if (l) {
ctx.fillStyle = "black";
ctx.arc(x + (r / 2) * Math.sin(Angle), y - (r / 2) * Math.cos(Angle), r/10, st, end, oc);
} else {
ctx.fillStyle = "red";
ctx.arc(x - (r / 2) * Math.sin(Angle), y + (r / 2) * Math.cos(Angle), r/10, st, end, oc);
}
ctx.closePath();
ctx.stroke();
ctx.fill();
} //此函数是画带S形曲线的圆,l表示左右,true表示左,顺时针,false表示右,逆时针
//d表示度数
function halfCircle(ctx, x, y, r, w, l,d) {
ctx.lineWidth = w;
if (l) {
ctx.fillStyle = "black";
} else {
ctx.fillStyle = "red";
}
ctx.beginPath();
var Angle = d * Math.PI / 180;//偏移角用弧度表示 ctx.arc(x + (r / 2) * Math.sin(Angle), y - (r / 2) * Math.cos(Angle), r / 2, Math.PI / 2 + Angle, Math.PI * 3 / 2 + Angle, true);
ctx.arc(x - (r / 2) * Math.sin(Angle), y + (r / 2) * Math.cos(Angle), r / 2, Math.PI*3 / 2 + Angle, Math.PI / 2 + Angle, true);
ctx.arc(x, y, r, Math.PI / 2 + Angle, Math.PI * 3 / 2 + Angle, l); //顺时针,逆时针通过参数判断
ctx.closePath();
ctx.stroke();
ctx.fill();
} var num = 0;//表示旋转的度数
function drawTaichi() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var cX = 200;
var cY = 200;
var radius = 150;
ctx.clearRect(0,0,c.width,c.height);
//绘制s线 左
halfCircle(ctx, cX, cY, radius, 1, true, num);
//右
halfCircle(ctx, cX, cY, radius, 1, false, num);
//绘制小圆,上
smallCircle(ctx, cX, cY, radius, 0, Math.PI * 2, 1, true, true, num);
//绘制小圆,下
smallCircle(ctx, cX, cY, radius, 0, Math.PI * 2, 1, true, false, num);
//绘制外圆
bigCircle(ctx, cX, cY, radius, 0, Math.PI * 2, 2, true);
ctx.save();
num++;
num = num % 360;//只有360°,所以大于360,就重新开始
} window.onload = function () {
setInterval(drawTaichi, 200);
} </script>
Html5 绘制旋转的太极图的更多相关文章
- HTML 5:绘制旋转的太极图
HTML: <!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title& ...
- Winform GDI+绘图二:绘制旋转太极图
大家好,今天有时间给大家带来Winform自绘控件的第二部分,也是比较有意思的一个控件:旋转太极图. 大家可以停下思考一下,如果让你来绘制旋转的太极图,大家有什么样的思路呢?我今天跟大家展示一下,我平 ...
- .NET绘制旋转太极图
.NET绘制旋转太极图 我之前发了一篇<用.NET写"算命"程序>的文章,但有人纷纷提出了质疑,认为没有"科学"(mi xin)依据
- Html5绘制饼图统计图
这里要介绍的是一个jQuery插件:jquery.easysector.js Html5提供了强大的绘图API,让我们能够使用javascript轻松绘制各种图形.本文将主要讲解使用HTML5绘制饼图 ...
- 纯css3实现旋转的太极图
效果图: 代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta charset=&quo ...
- HTML5图片旋转
HTML5图片旋转 首先我们使用Cococs2dx-Js-Lite版,来创建一个工程,我们所需要的开发环境如下: 1,webstrom 2,google chrome浏览器 3,cocos2dx-Js ...
- CSS3实现旋转的太极图(二):只用1个DIV
效果预览: PS: 1.昨天用3个DIV实现了太极图(点击查看),,今天试着用1个Div来做. 2.公司刚忙过双10周年庆,最近空闲下来,闲着也是闲着,总得写点东西吧. 3.高手莫喷,小弟仅仅是没 ...
- CSS3绘制旋转的太极图案(一)
实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...
- C#利用GDI+绘制旋转文字等效果
C#中利用GDI+绘制旋转文本的文字,网上有很多资料,基本都使用矩阵旋转的方式实现.但基本都只提及按点旋转,若要实现在矩形范围内旋转文本,资料较少.经过琢磨,可以将矩形内旋转转化为按点旋转,不过需要经 ...
随机推荐
- Open 语法的使用
我们通常会需要在命令中,打开文件输入信息,在python中我们就会使用open语法,进行此方面的操作.详细方式如下:#Python open 函数# 作用:打开一个文件# 语法:open(file[, ...
- Asp.net中static变量和viewstate的使用方法(谨慎)
在.Net平台下进行CS软件开发时,我们经常遇到以后还要用到某些变量上次修改后的值,为了简单起见,很多人都习惯用static来定义这些变量,我也是.这样非常方便,下一次调用某个函数时该变量仍然保存的是 ...
- 如何卸载重装docker?
http://blog.csdn.net/yangzhenping/article/details/43671843
- iOS APP可执行文件的组成
iOS APP编译后,除了一些资源文件,剩下的就是一个可执行文件,有时候项目大了,引入的库多了,可执行文件很大,想知道这个可执行文件的构成是怎样,里面的内容都是些什么,哪些库占用空间较高,可以用以下方 ...
- 【原】iOS学习之Masonry第三方约束
1.Masonry概述 目前最流行的Autolayout第三方框架 用优雅的代码方式编写Autolayout 省去了苹果官方恶心的Autolayout代码 大大提高了开发效率 框架地址:https:/ ...
- 利用PHP的ob函数实现生成静态化页面
之前用过一些开源的CMS管理系统,当时就很好奇后台中的生成HTML静态文件是怎么实现的.今天和同事讨论了下,没想到同事之前做过这类的生成静态页面的功能,果断向他请教了下. 经他讲解后,才知道其实生成静 ...
- HTML解析器HtmlAgilityPack的一些使用总结(C#)
哎~本来这些总结是作为使用时的快速备注,但是用不上了.实际应用当中HtmlAgilityPack的可靠性不太稳定,一主要问题是:-> 一些字符会出现乱码或者变成'?',如韩语字符.由于我是已经有 ...
- 【转】安全传输协议SSL和TLS及WTLS的原理
一.首先要澄清一下名字的混淆 1.SSL(Secure Socket Layer)是Netscape公司设计的主要用于WEB的安全传输协议.这种协议在WEB上获得了广泛的应用. 2.IETF将SSL作 ...
- PL/SQL Developer如何连接64位的Oracle图解
在64位Win7系统上安装64位的Oracle数据库,但是没有对应的64位PL/SQL Developer,此时就不能使用PL/SQL Developer来进行直接连接的,所以要想实现连接还得需要其他 ...
- linux终端 字符界面 显示乱码
方法一:配置SSH工具 SecureCRT中文版配置 [全局选项]→[默认会话]→[编辑默认设置]→[终端]→[外观]→[字体]→[新宋体 10pt CHINESE_GB2312]→[字符编码 UTF ...