太极八卦图

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="800px" height="800px"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

context.beginPath();
context.arc(200,200,200,0,2*Math.PI,false);
context.closePath();
context.stroke()

context.beginPath();
context.arc(200,200,200,0.5*Math.PI,1.5*Math.PI,false);
context.closePath();
context.fillStyle = "#000";
context.fill()

context.beginPath();
context.arc(200,100,100,0,1.5*Math.PI,false);
context.closePath();
context.fillStyle = "#fff";
context.fill()

context.beginPath();
context.arc(200,300,100,0.5*Math.PI,1.5*Math.PI,true);
context.closePath();
context.fillStyle = "#000";
context.fill()

context.beginPath();
context.arc(200,100,50,0,2*Math.PI,false);
context.closePath();
context.fillStyle = "#000";
context.fill()

context.beginPath();
context.arc(200,300,50,0,2*Math.PI,false);
context.closePath();
context.fillStyle = "#fff";
context.fill()

</script>
</body>
</html>

原文地址：https://www.cnblogs.com/3542446186qq/p/10098581.html

时间： 2024-10-09 16:55:51

太极八卦图的相关文章

使用CSS3生成一个会旋转的太极八卦图

学习了CSS3 后,可以做出很多炫酷的效果,但是基本功需要打扎实,就从学习使用纯CSS技术生成太极八卦图学起. 第一步,先使用HTML进行一下简单的布局,如下,只需要一个DIV即可: <body> <div></div> </body> 第二步,插入了DIV之后, 就需要为其添加样式,以及设置其为圆形,我们宽要设置的是高的2倍,这样在为底边框添加了宽度后,保证DIV出来后是圆形,如下: div { width:500px; height:250px; bor

Tweetable Mathematical Art 太极八卦图

从Matrix67 blog里面看到了Tweetable Mathematical Art. 使用C++实现3个函数RD(i, j), GR(i, j), BL(i, j)分别返回像素(i, j)的R/G/B值,最终生成1幅1024*1024的图片.要求是每个函数代码不超过140字符,即Tweetable. 来个太极八卦图,娱乐一下. unsigned char RD(int i,int j){ // YOUR CODE HERE #define LEFT (i < DIM/2) #define

算法生成太极八卦图

前面一篇文章是通过算法生成一幅太极图,有道是:无极生太极,太极生两仪,两仪生四象,四象生八卦.那么这一节就为太极生成一个八卦图.虽然我对易经这种玄之又玄的哲学没什么研究,但至少八卦可以看做是二进制的鼻祖.愿太极八卦保佑我们的程序绝无BUG,永不修改. 根据二进制数的规定:有,用1表示;无,用0表示.我们可以得出八卦各卦阳爻和阴爻的二进制数.下面我们写出八卦各卦阳爻的二进制数(即有阳爻为1,无阳爻为0): 坤:黑黑黑,卦符阴阴阴,二进制数为000 艮:黑黑白,卦符阴阴阳,二进制数为001 坎:黑白

旋转太极八卦

太极八卦图,以同圆内的圆心为界,画出相等的两个阴阳鱼表示万物相互关系.阴鱼用黑色,阳鱼用白色,这是白天与黑夜的表示法.阳鱼的头部有个阴眼,阴鱼的头部有个阳眼,表示万物都在相互转化,互相渗透,阴中有阳,阳中有阴,阴阳相合,相生相克,即现代哲学中和矛盾对立统一规律表示法. 哈哈,装了个逼.其实我就是想教大家用css3画出旋转太极八卦.仅此而已. 实现效果如下图: Html的代码很简单,就一行代码,如下图: 下面对div.tl标签进行一系列属性设置,变化如下图: ............ ......

用h5中的canvas 绘制八卦图

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas绘制八卦图</title> 6 </head> 7 8 <body> 9 <canvas id="canvas" width="600" height="500"><

使用CSS达到阴阳八卦图等图形

CSS还是比較强大的,能够实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-color: red; } #circle { width: 100px; height: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; background-color: red; }

用CSS实现阴阳八卦图等图形

CSS还是比较强大的,可以实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-color: red; } #circle { width: 100px; height: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; background-color: red; }

八卦图绕矩形旋转移动

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> @keyframes bagua{ 25%{transform:translate(500px) rotate(360deg);} 50%{transform:translate(500px,500px) rotat

八卦图绕圆旋转

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> //动画旋转 @keyframes bagua{ 100%{transform:rotate(1080deg)} } //适配浏览器 @-webkit-keyframes bagua{ 100%{transform: