运行效果：

<!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. android 到底是什么决定了app的名称 application label activity label

    原文地址:http://blog.csdn.net/lamp_zy/article/details/7878979 原来博主的博客的名字仅仅是application label表示菜比的我没有搜到,然 ...

  2. 转：js点击事件在ios中失效的3种解决方案

    ios中不允许将点击事件绑定在document或者body上,如果绑定上的话将会失效.解决方案: 例如:  $(document).on('click', '#generate', function ...

  3. shell脚本 加密备份MySQL数据库

    1.加密备份为.bak文件(实际只是个.zip文件) #!/bin/bash # $:IP地址 # $:用户名 # $:数据库密码 # $:数据库名 # $:加密密码 # $:备份文件名 mysqld ...

  4. linux服务器上的mysql允许远程连接

    首先进入mysql: 输入GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '123456' WITH GRANT OPTION; 这里是 ...

  5. 【Swift】学习笔记(二)——基本运算符

    运算符是编程中用得最多的,其包含一元,二元和三元 三种运算符.swift也和其他编程语言一样基本就那些,以下总结一下,也有它特有的运算符.比方区间运算符 1.一元运算符 =   赋值运算符,用得最多的 ...

  6. linux恢复误删除文件-extundelete

     经过本人測试该工具支持ext3和ext4文件系统 当发现某个分区的数据被误删除后.要做的第一件事是立马卸载被误删除文件所在的分区,或者又一次以仅仅读方式挂载此分区. 这么做的原因事实上非常eas ...

  7. STM32学习之路-感觉自己走到了一个天大的坑里了！

    先前兴致勃勃的来弄16位并口驱动LCD.本以为就须要改下LCD IC的初始化即可了,没想到弄了这么多天最终发现自己走进了一个深坑了 T T 原因是我的开发板是奋斗V5的, 它确实有MCU外扩IO口, ...

  8. java Bean及其使用

    1 getter/setter方法 java例子: public class student { private String name; public String getName() { retu ...

  9. HDU 5855Less Time, More profit

    Less Time, More profit Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/O ...

  10. Android 通过USB查看kernel调试信息【转】

    本文转载自:http://blog.csdn.net/lindonghai/article/details/51683644 前提:电脑已安装adb并可正常使用. 在调试Android驱动时,需要查看 ...