先放一个效果图：

代码如下

<!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. Python3基础笔记--装饰器

    装饰器是十二分重要的高级函数. 参考博客:装饰器 所需前提知识: 1.作用域: LEGB 2.高阶函数 高阶函数是至少满足下列一个条件的函数: 1)接受一个或多个函数作为输入 2)输出一个函数 注意理 ...

  2. Hexo 与 Git 集成

    git初始化项目 登录Github,初始化GitHub Pages项目.即是添加一个Git Project. 点击New repository创建一个新的Project.需要填写选项如下:    -  ...

  3. cacti1.1安装报错

    安装过程中出现以下报错: ERROR: Your MySQL TimeZone database is not populated. Please populate this database bef ...

  4. 统计 MapReduce 输出路径修改。

    先在上一篇MR 的104 行加入代码.jobConf.setOutputFormat(MyMultipleFilesTextOutputFormat.class); 用意是自定义 job 的输出格式: ...

  5. CountDownLatch &amp; CyclicBarrier源代码实现解析

    CountDownLatch CountDownLatch同意一条或者多条线程等待直至其他线程完毕以系列的操作的辅助同步器. 用一个指定的count值对CountDownLatch进行初始化. awa ...

  6. 关于Windows7下创建Cocos2D-X项目的小问题

    "新版的Cocos2D-X"已经不支持用上述脚本来创建工程了,而是改为用create-project.py来创建...命令格式: python create-project.py ...

  7. cocos2d-x 显示触摸操作(显示水波点击效果,用于视频演示)

    昨天刚刚參加玩游戏设计大赛, 积累了一些东西. 接下去将会逐个分享出来. 首先是显示触摸操作. 由于要演示我们的作品.使用试玩过程中, 假设没办法显示我们的触摸操作(像录制视频一样, 点击了屏幕某点, ...

  8. python list的+，+=，append，extend

    面试题之中的一个. def func1(p): p = p + [1] def func2(p): p += [1] p1 = [1,2,3] p2 = [1,2,3] func1(p1) func2 ...

  9. 浏览器下载img标签Base64图片

    https://blog.csdn.net/qq_42076140/article/details/82113622    原文地址 <a href="javascript:downl ...

  10. 优化时序之补全if else

    时序优化中重要的一项就是提高模块的最高工作频率,工作频率由关键路径决定,通常的提高工作频率的步骤是:利用时序分析工具找到关键路径,分析关键路径主要延迟是布线延迟还是逻辑延迟,然后轮番十八般武器,如果是 ...