运行效果：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

    <canvas id="drawing" width="" height="">A drawing of someing!</canvas>

    <script type="text/javascript">

　　 var drawing = document.getElementById('drawing');

        if(drawing.getContext) {

            //绘制太极图

            var context = drawing.getContext('2d');

            context.fillStyle = 'Lavender';

            context.fillRect(, , , );

            //画外面的两个大半圆

            context.fillStyle = '#000';

            context.beginPath();

            context.arc(, , , 0.5*Math.PI, 1.5*Math.PI, false);

            context.closePath();

            context.fill();

            context.fillStyle = '#fff';

            context.beginPath();

            context.arc(, , , 1.5*Math.PI, 0.5*Math.PI, false);

            context.closePath();

            context.fill();

            //画里面的两个小半圆

            context.beginPath();

            context.arc(, , , 0.5*Math.PI, 1.5*Math.PI, false);

            context.closePath();

            context.fill();

            context.fillStyle = '#000';

            context.beginPath();

            context.arc(, , , 1.5*Math.PI, 0.5*Math.PI, false);

            context.closePath();

            context.fill();

            //画里面的两个小圆

            context.beginPath();

            context.arc(, , , , *Math.PI, false);

            context.closePath();

            context.fill();

            context.fillStyle = '#fff';

            context.beginPath();

            context.arc(, , , , *Math.PI, false);

            context.closePath();

            context.fill();

        }

    </script>

</body>

</html>

canvas一周一练 -- canvas绘制太极图（6）的更多相关文章

  1. canvas一周一练 -- canvas绘制中国银行标志（4）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  2. canvas一周一练 -- canvas绘制饼图（3）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  3. canvas一周一练 -- canvas绘制马尾图案 （5）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  4. canvas一周一练 -- canvas绘制立体文字（2）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  5. canvas一周一练 -- canvas绘制奥运五环（1）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  6. canvas一周一练 -- canvas基础学习

    从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳＿┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...

  7. canvas学习总结三：绘制路径-线段

    Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText() ...

  8. 【canvas学习笔记二】绘制图形

    上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个 ...

  9. canvas学习总结六：绘制矩形

    在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRec ...

随机推荐

  1. [WebGL入门]五，矩阵的基础知识

    注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上［lufy:］,另外.鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指 ...

  2. oracle导入命令，记录一下 数据库日志太大，清理日志文件

    oracle导入命令,记录一下 工作中用到了,这个命令,记录一下,前提要安装imp.exe imp PECARD_HN/PECARD_HN@127.0.0.1:1521/orcl file=E:\wo ...

  3. Go 语言的下一个大版本：Go 2.0 被安排上了（全面兼容1.X，改进错误处理和泛型这两大主题）

    今年 8 月 Go 开发团队公布了 Go 2.0 的设计草案,包括错误处理和泛型这两大主题.现在备受瞩目的 Go 2.0 又有了新动向 —— 昨日 Go 开发团队在其官方博客表示,Go 2 已经被安排 ...

  4. luogu1314 聪明的质检员

    题目大意 小 T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有 n 个矿石,从 1 到 n 逐一编号,每个矿石都有自己的重量 wi 以及价值 vi.检验矿产的流程是: 1.给定 m 个区 ...

  5. HDU 5976 Detachment 【贪心】 (2016ACM/ICPC亚洲区大连站)

    Detachment Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  6. 【Android】Android输入子系统【转】

    本文转载自:https://www.cnblogs.com/lcw/p/3506110.html Linux输入子系统回顾 1:为什么要回顾linux输入子系统?这个问题后面自然就知道了 1.linu ...

  7. mac 下idea光标问题

    可以使用 fn + i 解决此问题

  8. 昆石VOS3000_2.1.2.0完整安装包及安装脚本

    安装包下载地址 http://www.51voip.org/post/57.html 安装教程: 上传安装包 ·给整个目录授权 chmod 777 /root/vosintsall 1.安装前准备 首 ...

  9. apache相关补充

    apache相关补充 sendfile机制 1)不用sendfile的传统网络传输过程: read(file, tmp_buf, len) write(socket, tmp_buf, len) 2) ...

  10. 测试DNS服务的命令

    测试DNS服务的命令 dig dig用于测试dns系统,因此不会查询hosts文件进行解析. dig - DNS lookup utility dig [@global-server] [domain ...