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+绘制旋转文本的文字,网上有很多资料,基本都使用矩阵旋转的方式实现.但基本都只提及按点旋转,若要实现在矩形范围内旋转文本,资料较少.经过琢磨,可以将矩形内旋转转化为按点旋转,不过需要经 ...
随机推荐
- 从OOP的角度看Golang
资料来源 https://github.com/luciotato/golang-notes/blob/master/OOP.md?hmsr=toutiao.io&utm_medium=tou ...
- Ice-E(Embedded Internet Communications Engine)移植到s3c2440A(arm9)linux(2.6.12)上的
2009-03-26 18:31:31 原文链接 1.前言 ICE-E是ICE在嵌入式上运行的一个版本,与ICE比较如下: Category Ice 3.3.0 Ice-E 1.3.0 Thread ...
- C# DataGridView绑定数据源
第一种: DataSet ds=new DataSet (); ]; 第二种: DataTable dt=new DataTable(); this.dataGridView1.DataSource= ...
- [翻译svg教程]Path元素 svg中最神奇的元素!
先看一个实例 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999 ...
- 【逆向篇】分析一段简单的ShellCode——从TEB到函数地址获取
其实分在逆向篇不太合适,因为并没有逆向什么程序. 在http://www.exploit-db.com/exploits/28996/上看到这么一段最简单的ShellCode,其中的技术也是比较常见的 ...
- 从源代码构建 Go 开发环境
从源代码构建 Go 开发环境 Go 1.5 之前的版本 安装C 语言开发环境 在Go 1.5 之前的版本(比如 1.3.1.4),都会部分的依赖 C 语言的工具链,所以如果你有C 语言的开发环境,就可 ...
- JAVA面试逻辑题1
一.计算推理 烧香问题: 有两根不均匀分布的香,每一根烧完的时间都是一小时.用什么办法确定一段15分钟的时间? 解题步骤: 1.点燃第一根的两头,同时点燃第二根的一头: 2.等到第一根燃尽以后,再点燃 ...
- iOS开发之单元测试
开始之前 本文侧重讲述如何在iOS程序的开发过程中使用单元测试.使用Xcode自带的OCUnit作为测试框架. 一.单元测试概述 单元测试作为敏捷开发实践的组成之一,其目的是提高软件开发的效率,维持代 ...
- Centos7强制卸载Mariadb
之前安装过Mariadb 10.2.1版本,现在安装10.1.19版本,提示安装成功了,其实是失败的.MariaDB-server 提示已经安装,通过 rpm qa|grep MariaDB 查看 发 ...
- Windows多线程多任务设计初步(转)
Windows多线程多任务设计初步 [前言:]当前流行的Windows操作系统,它能同时运行几个程序(独立运行的程序又称之为进程),对于同一个程序,它又可以分成若干个独立的执行流,我们称之为线程,线程 ...