文档章节

HTML绘制太极八卦图

o
 osc_isezqdgg
发布于 2019/09/18 16:04
字数 183
阅读 12
收藏 0

精选30+云产品,助力企业轻松上云!>>>

实现效果如下:

 

 

实现代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>太极八卦图</title>
    <style type="text/css">
        div{
            text-align: center;
            margin-top: 30px;
        }
        #mytj{
            background-color: skyblue;        
        }
    </style>
</head>
<body>
    <div>
        <canvas width="600px" height="600px" id="mytj"></canvas>
    </div>
    <script type="text/javascript">
        var mytj = document.getElementById('mytj');
        var mt = mytj.getContext('2d');

        //左边黑色大半圆
        mt.beginPath();    
        mt.arc(300,300,200,90*Math.PI/180,270*Math.PI/180,false);
        mt.fillStyle='#000';
        mt.fill();

        //右边白色大半圆
        mt.beginPath();    
        mt.arc(300,300,200,270*Math.PI/180,90*Math.PI/180,false);
        mt.fillStyle='#fff';
        mt.fill();

        //左边白色中半圆
        mt.beginPath();    
        mt.arc(300,200,100,90*Math.PI/180,270*Math.PI/180,false);
        mt.fillStyle='#fff';
        mt.fill();

        //右边黑色中半圆
        mt.beginPath();    
        mt.arc(300,400,100,270*Math.PI/180,90*Math.PI/180,false);
        mt.fillStyle='#000';
        mt.fill();

        //左边黑色小圆
        mt.beginPath();    
        mt.arc(300,200,50,0*Math.PI/180,360*Math.PI/180,false);
        mt.fillStyle='#000';
        mt.fill();

        //右边白色小圆
        mt.beginPath();    
        mt.arc(300,400,50,0*Math.PI/180,360*Math.PI/180,false);
        mt.fillStyle='#fff';
        mt.fill();

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

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
.NET绘制旋转太极图

.NET绘制旋转太极图 我之前发了一篇《》的文章,但有人纷纷提出了质疑,认为没有“科学”( )依据😂。 所谓“太极生两仪,两仪生四象,四象生八卦,八卦定吉凶,吉凶生大业”,因此,我只...

osc_bdhojhcu
01/19
0
0
用CSS绘制最常见的40种形状和图形

原文链接:::::http://www.webhek.com/post/40-css-shapes.html 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形、圆形和三角形,也有各种常见的多边...

osc_tm2zceka
2018/06/26
2
0
Oracle的体系结构(七)

天地初开,一切皆为混沌,是为无极;阴阳交合,阴阳二气生成万物是为太极;清者上升为天,浊者下沉为地,分为东,南,西,北四方,每方各有一神首镇守,东方青龙,西方白虎,南方朱雀,北方玄...

N0body
2013/05/22
16
0
易经-八卦概述(二)

易经 《易经》指《连山》、《归藏》、《周易》三部易书。其中《连山》和《归藏》已经失传,现存于世的只有《周易》。从本质上来讲,《易经》是阐述关于变化之书,是博大精深的辩证法哲学书。...

osc_4zx4bjhm
05/08
7
0
易经-八卦概述(二)

易经 《易经》指《连山》、《归藏》、《周易》三部易书。其中《连山》和《归藏》已经失传,现存于世的只有《周易》。从本质上来讲,《易经》是阐述关于变化之书,是博大精深的辩证法哲学书。...

MyySophia
05/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

io.DataInputStream

一、前言 本文解决io.DataInputStream.skipBytes(int n) 用于跳过输入流中x个字节的数据 1 语法public final int skipBytes(int n)2 参数n:要跳过的字节数。3 返回值此方法返回要跳过...

osc_i1dzen1k
11分钟前
9
0
深度解读OpenYurt:从边缘自治看YurtHub的扩展能力

作者 | 新胜 阿里云技术专家 导读:OpenYurt 开源两周以来,以非侵入式的架构设计融合云原生和边缘计算两大领域,引起了不少行业内同学的关注。阿里云推出开源项目 OpenYurt,一方面是把阿里...

osc_j9ayg4mu
13分钟前
0
0
跨域三大洲的圆桌讨论:人工智能的未来挑战与突破

     作者 | 蒋宝尚、青暮   编辑 | 丛 末   7月9日,世界人工智能大会开启了一场跨洲连线,参与连线的有六位嘉宾,他们就主题《人工智能的未来挑战与突破》进行了圆桌讨论。    ...

osc_emgrwx5d
14分钟前
0
0
Spring Cloud微服务Sentinel+Apollo限流、熔断实战

在Spring Cloud微服务体系中,由于限流熔断组件Hystrix开源版本不在维护,因此国内不少有类似需求的公司已经将眼光转向阿里开源的Sentinel框架。而以下要介绍的正是作者最近两个月的真实项目...

osc_facwbzof
16分钟前
18
0
order by 注入姿势

order by 注入原理 其实orde by 注入也是sql注入的一种,原理都一样就是mysql语法的区别,order by是用来排序的语法。 sql-lab讲解 判断方法 1.通过做运算来判断如:2-1的返回是否和1一样,和通...

osc_tu9yshvx
17分钟前
24
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部