先放一个效果图：

代码如下

<!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. 细说ReactiveCocoa的冷信号与热信号（一）

    热信号:事件触发: 冷信号:订阅出发: 从本质上来说,是信号的存在和产生,是静态信号和动态信号的区别. 背景 ReactiveCocoa(简称RAC)是最初由GitHub团队开发的一套基于Cocoa的 ...

  2. gitHub上如何设置或者取消电子邮箱提醒

    原文链接:点我 我们正常注册的gitHub一般应该都是电子邮箱的方式,在注册账号时可能选择或者默认给了各种提醒,但是gitHub的邮箱提醒真的就比较烦人了,特别是最近团队开发项目,什么动态都有提醒,就 ...

  3. mysql生成随机时间

    mysql> update test set create_time=concat('2013-10-01 ', floor(10+rand()*10),':',floor(10+rand()* ...

  4. iOS开发系列之四 - UITextView 使用方法小结

    // 初始化输入框并设置位置和大小 UITextView *textView = [[UITextView alloc] initWithFrame:CGRectMake(10, 10, 300, 1 ...

  5. JavaWeb与JSP初识

    JavaWeb执行过程 目录结构 Web程序部署在Tomcat的/webapps下面. 一个webapps文件夹可以部署多个不同的Web应用,webapps/web1,webapps/web2. 如果 ...

  6. quartz-misfire 错失、补偿执行

    调度(scheduleJob)或恢复调度(resumeTrigger,resumeJob)后不同的misfire对应的处理规则 misfire产生的条件是:到了该触发执行时上一个执行还未完成,且线程池 ...

  7. mybatis :实现mybatis分页

    上一篇文章里已经讲到了mybatis与spring MVC的集成,并且做了一个列表展示,显示出所有article 列表,但没有用到分页,在实际的项目中,分页是肯定需要的.而且是物理分页,不是内存分页. ...

  8. Linux150个常用指令

    线上查询及帮助命令(2个) 文件和目录操作命令(18个) 查看文件及内容处理命令(21个) 文件压缩及解压缩命令(4个) 信息显示命令(11个) 搜索文件命令(4个) 用户管理命令(10个) 基础网络 ...

  9. iRedMail邮件系统配置简易视频安装教程

    iRedMail邮件系统配置简易视频安装教程        iRedMail邮件系统配置简易视频安装教程 iRedMail中文名为“艾瑞得邮件系统”, 属于开源的企业邮件解决方案,但其性能不逊于任何商 ...

  10. Network Stack

    Network Stack 目录 1 Overview 2 Code Layout 3 Anatomy of a Network Request (focused on HTTP) 3.1 URLRe ...