运行效果：

<!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. hdu 1009 FatMouse&#39; Trade

    FatMouse' Trade Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  2. PCCs系数

    package ai; public class pccs { public static void main(String[] args) { double same[][]=new double[ ...

  3. nginx进程和实时控制

    原文地址:http://nginx.com/resources/admin-guide/processes-and-runtime-control/ Processes and Runtime Con ...

  4. Flask的闪现(message) 请求扩展 中间件 蓝图

    补充:一个编程思路 需求:做一些邮件短信微信的消息通知,比如账单告警之类的:比如数据库操作,数据库种类繁多:缓存的选择比如redis/memcache,诸如此类需要进行选择配置,如果我们单纯的用函数去 ...

  5. nginx开发（二）配置mp4文件在线播放

    1: 第一步先开打nginx的文件夹遍历功能 vi /usr/local/nginx/conf/nginx.conf #编辑配置文件,在http {下面添加以下内容: autoindex on; #开 ...

  6. FreeMarker：

    ylbtech-FreeMarker: 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   作者:ylbtech出处:http://ylbt ...

  7. hdu1213 并查集不压缩

    题意:题意:一个人请人吃饭,相互认识的朋友在一张桌子,相互认识的朋友的意思是如果A认识B,B认识C,那么A.B.C是朋友,对于每组输入输出桌子的张数. Sample Input 2 5 3 1 2 2 ...

  8. 【weiphp】安装中报错

    问题描述:安装的第三部报错“SQLSTATE[HY000]: General error: 2030 This command is not supported in the prepared sta ...

  9. robotframework - 框架做接口自动化get请求

    1.做get请求之前先安装 Request库,参考github上链接 :https://github.com/bulkan/robotframework-requests/#readme 2.请求&a ...

  10. 2019 第三届强网杯线上赛部分web复现

    0x00前言 周末打了强网杯,队伍只做得出来6道签到题,web有三道我仔细研究了但是没有最终做出来,赛后有在群里看到其他师傅提供了writeup和环境复现的docker环境,于是跟着学习一波并记录下来 ...