先放一个效果图：

代码如下

<!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. B-Boxes

    http://agc010.contest.atcoder.jp/tasks/agc010_b Problem Statement There are N boxes arranged in a ci ...

  2. bzoj2124 等差子序列（树状数组+hash）

    题意 给你一个1~n排列,问有没有一个等差数列(长度至少为3) 题解 我居然自己想到了正解. 但我最后写挂了,所以我又看了题解. 我们维护了一个以权值为下标的01序列. 我们扫描整个序列.对于每一个正 ...

  3. 题解 P1531 【I Hate It】

    这道题明明是裸的线段树,蒟蒻却80分了五六次... ------------ 根据题意,显然是维护一棵单点修改区间查询的线段树,于是直接套区间修改的代码... 结构体,即为树上的节点. struct ...

  4. CodeForces 312B Archer

    Archer Time Limit: 2000ms Memory Limit: 262144KB This problem will be judged on CodeForces. Original ...

  5. HTML学习----------DAY1 第三节

    本章通过实例向您演示最常用的 HTML 标签. 提示:不要担心本章中您还没有学过的例子,您将在下面的章节中学到它们. 提示:学习 HTML 最好的方式就是边学边做实验.我们为您准备了很好的 HTML ...

  6. android 在短信发送界面， 短信发送失败时，提示音不完整，会被中断

    1. 当一条SMS到来, 此时SMS是unseen状态, 就会弹出Notification提示用户 2. 但假设处于同一个联系人的界面下, 用户会立马看到这条SMS, 此时这条SMS会被高速的标记为s ...

  7. java中string与json互相转化

    在Java中socket数据传输时,数据类型往往比較难选择.可能要考虑带宽.跨语言.版本号的兼容等问题. 比較常见的做法有两种:一是把对象包装成JSON字符串传输,二是採用java对象的序列化和反序列 ...

  8. [递推+dfs]ZOJ 3436. July Number

    题目大意: 将一个数字的相邻两位的差(的绝对值)组成一个新的数字.不断反复.假设最后得到7,就称这个数为July Number,比方9024 – 922 – 70 – 7. 题目要求1e9范围内给定区 ...

  9. 并查集树数据结构hdu1325

    我的解法就是去构造了一棵树 以数组的存储方式 数组的值存放节点的根. 排除空树 剩下的就是出现环和多根节点的情况 也就是排除森林和有一个节点多个入度的情况 排除森林就用到了并查集 也就是便利数组让其仅 ...

  10. 【python下使用OpenCV实现计算机视觉读书笔记2】图像与字节的变换

    import cv2 import numpy import os # Make an array of 120,000 random bytes. randomByteArray = bytearr ...