先放一个效果图：

代码如下

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

    </head>

    <body>

        <canvas width="600px" height="600px" id="canvas"></canvas>

        <script type="text/javascript">

            var canvas = document.getElementById("canvas");

            var ctx = canvas.getContext("2d");

            ctx.arc(300,300,100,0,2*Math.PI)

            ctx.stroke();

            ctx.beginPath();

            ctx.arc(300,300,100,0.5*Math.PI,1.5*Math.PI)

            ctx.fill();

            ctx.beginPath();

            ctx.arc(300,250,50,0.5*Math.PI,1.5*Math.PI);

            ctx.fillStyle = "white";

            ctx.fill();

            ctx.beginPath();

            ctx.arc(300,350,50,1.5*Math.PI,0.5*Math.PI);

            ctx.fillStyle = "black";

            ctx.fill();

            ctx.beginPath();

            ctx.arc(300,250,25,0,2*Math.PI);

            ctx.fillStyle = "black";

            ctx.fill();

            ctx.beginPath();

            ctx.arc(300,350,25,0,2*Math.PI);

            ctx.fillStyle = "white";

            ctx.fill();

        </script>

    </body>

</html>

具体来说，先画出一个圆

 ctx.arc(300,300,100,0,2*Math.PI)

            ctx.stroke();

然后在圆的左半边填充黑色

ctx.beginPath();

            ctx.arc(300,300,100,0.5*Math.PI,1.5*Math.PI)

            ctx.fill();

然后在圆心纵坐标上下各二分之一半径处分别画一个圆，一个填充黑色，一个填充白色

            ctx.beginPath();

            ctx.arc(300,250,50,0.5*Math.PI,1.5*Math.PI);

            ctx.fillStyle = "white";

            ctx.fill();

            ctx.beginPath();

            ctx.arc(300,350,50,1.5*Math.PI,0.5*Math.PI);

            ctx.fillStyle = "black";

            ctx.fill();

最后在这两个圆内分别填充一个更小的圆，一个黑色，一个白色

ctx.beginPath();

            ctx.arc(300,250,25,0,2*Math.PI);

            ctx.fillStyle = "black";

            ctx.fill();

            ctx.beginPath();

            ctx.arc(300,350,25,0,2*Math.PI);

            ctx.fillStyle = "white";

            ctx.fill();

如何在canvas中画出一个太极图的更多相关文章

  1. wpf 在不同DPI下如何在DrawingVisual中画出清晰的图形

    环境Win10 VS2017 .Net Framework4.7.1   本文仅讨论在DrawingVisual中进行的画图.   WPF单位,系统DPI,显示器DPI三者的定义及关系 WPF单位:一 ...

  2. 使用JavaScript在Canvas上画出一片星空

    随着Html5的迅猛发展,画布也变得越来越重要.下面我就写一个关于在canvas上画出一片星空的简单的代码的示例. 理论基础 初始化一个canvas,获得一个用于绘制图形的上下文环境context.并 ...

  3. 用HTML+CSS画出一个同心圆

    参加web前端校招的同学们经常会遇到这样的面试题:用HTML+CSS画出一个同心圆. 例如: 这道题主要考验的是基础盒模型布局能力和倒圆角属性的巧用. 1.html代码 <body> &l ...

  4. python—networkx：在一张图中画出多个子图

    通过plt.subplot能够在一张图中画出多个子图 #coding: utf-8 #!/usr/bin/env python """ Draw a graph with ...

  5. 【神经网络与深度学习】如何在Caffe中配置每一个层的结构

    如何在Caffe中配置每一个层的结构 最近刚在电脑上装好Caffe,由于神经网络中有不同的层结构,不同类型的层又有不同的参数,所有就根据Caffe官网的说明文档做了一个简单的总结. 1. Vision ...

  6. WPF Blend 脑洞大开的问题：如何用Blend得到或画出一个凹槽、曲面。

    原文:WPF Blend 脑洞大开的问题:如何用Blend得到或画出一个凹槽.曲面. 目标图: 步骤一(放置一个矩形,填充蓝色): 步骤二(复制该矩形,并调整边角,填充粉红色): 第三部:让图形部分重 ...

  7. 利用LineRenderer画出一个圆，类似于lol中的攻击范围

    http://www.unity蛮牛.com/blog-5945-1409.html 本人大四狗,学unity半年有余,写此文章纯粹记录自己的心得. 废话不多说,进入主题.... 效果如图: 首先要理 ...

  8. 第五讲：使用html5中的canvas动态画出物理学上平抛运动

    <html> <head> <title>平抛运动</title> <script src="../js/jscex.jscexRequ ...

  9. 使用CSS3画出一个叮当猫

    刚学习了这个案例,然后觉得比较好玩,就练习了一下.然后发现其实也不难,如果你经常使用PS或者Flash的话,应该就会知道画个叮当猫是很容易的事,至少我是这么觉得.但是,用CSS3画出来确实是第一次接触 ...

随机推荐

  1. python制造模块

    制造模块: 方法一: 1.mkdir /xxcd /xx 2.文件包含: 模块名.py setup.py setup.py内容如下:#!/usr/bin/env pythonfrom distutil ...

  2. NOIP2017普及组题

    提高组死亡选手来AK普及(耗时两天). T1 #include<bits/stdc++.h> using namespace std; int A,B,C; int main() { ci ...

  3. bzoj1922 [SDOI2010]大陆争霸 分层图

    问题描述 幻想历8012年5月12日深夜,斯普林·布拉泽降下神谕:“Trust me, earn eternal life.”克里斯军团士气大增.作为克里斯军团的主帅,你决定利用这一机会发动奇袭,一举 ...

  4. HDU-1032 The 3n+1 problem 模拟问题（水题）

    题目链接:https://cn.vjudge.net/problem/HDU-1032 水题 代码 #include <cstdio> #include <algorithm> ...

  5. [HNOI2018]爆零记

    Day 0 完全不知道做什么. 打了一个splay板子,还没调出来emmmmm 不想做题目,最后做的一题是[HNOI2016]的超(sha)难(bi)题网络. 当我希望省选能出一下树剖时,旁边的大佬跟 ...

  6. Unity C# 设计模式（六）原型模式

    定义:用原型实例指定创建对象的种类,并通过拷贝这些原型来创建新的对象. 优点: 1.原型模式向客户隐藏了创建新实例的复杂性 2.原型模式允许动态增加或较少产品类. 3.原型模式简化了实例的创建结构,工 ...

  7. SICP 习题 （2.11）解题总结:区间乘法的优化

    SICP 习题 2.11又出现Ben这个人了,如曾经说到的,仅仅要是Ben说的一般都是对的. 来看看Ben说什么.他说:"通过监測区间的端点,有可能将mul-interval分解为9中情况, ...

  8. Codeforces Round #313 C. Gerald&#39;s Hexagon（放三角形）

    C. Gerald's Hexagon time limit per test 2 seconds memory limit per test 256 megabytes input standard ...

  9. Android Volley 具体解释 Google公布的一套用于网络通信的工具库

    下载地址:git clone https://android.googlesource.com/platform/frameworks/volley 或 : https://github.com/mc ...

  10. CentOS 与Ubuntu 安装软件包的对比

    工作需要开始转向centos,简单记录软件包安装 wget不是安装方式 他是一种下载软件类似与迅雷 如果要下载一个软件 我们可以直接 wget 下载地址 ap-get是ubuntu下的一个软件安装方式 ...