先放一个效果图：

代码如下

<!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. js文字的无缝滚动（上下）

    使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可 Dom内容 <div id="container& ...

  2. 设置cookie的方法

    设置cookie的方法 1.登录之后后端返回的cookie放在响应的数据里,我们可以取到值, 这样就设置上了一个cookie,然后由于我们需要在三个环境里进行操作,开发环境.测试环境.生产环境.刚刚上 ...

  3. HTML5的核心内容

    开发者可以放心地使用html5的理由 兼容性.HTML5在老版本的浏览器可以正常运行,同时支持HTML5的新浏览器也能正常运行HTML4,用HTML4创建出来的网站不是必须全部重建的. 实用性.HTM ...

  4. blongsTo 用法

    当存在这样两张表的时候: one{ , 'name':"name" 'sex':"sex" } two{ , 'type':json } 当我们需要在调用到 o ...

  5. Python组织文件 实践：将文件的不同版本备份为ZIP文件

    功能:备份文件夹.能将文件的不同版本备份下来,并且每个有不同的名字 #! python3 # backupToZip.py - 备份文件的不同版本到压缩文件中 import zipfile,os #f ...

  6. LINUX 系统初始化脚本

    #!/bin/bash ######the system first start configuretion #####for install  ####copy right by donglei## ...

  7. 设计模式 - 组合模式(composite pattern) 迭代器(iterator) 具体解释

    组合模式(composite pattern) 迭代器(iterator) 具体解释 本文地址: http://blog.csdn.net/caroline_wendy 參考组合模式(composit ...

  8. CF 558A(Lala Land and Apple Trees-暴力)

    A. Lala Land and Apple Trees time limit per test 1 second memory limit per test 256 megabytes input ...

  9. poj 2240 Bellman-Flod 求环

    http://poj.org/problem?id=2240 深刻体现了自己代码能力有问题外加改模板能力有问题.外加Debug有问题.以后做到: 1.算法原理能够轻易弄出来. 2.代码模板自己收集各种 ...

  10. 如何测试WCF Rest

    使用SoapUI 1.新建一个rest项目 2.双击上图中的Request1 查询的时候,Method选择post resource的地方要调整到对应的方法 查询的内容是用json格式发送 查询的的结 ...