运行效果：

<!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. Python循环定时服务功能（相似contrab）

    Python实现的循环定时服务功能.类似于Linux下的contrab功能.主要通过定时器实现. 注:Python中的threading.timer是基于线程实现的.每次定时事件产生时.回调完响应函数 ...

  2. linux系统编程：线程同步-信号量(semaphore)

    线程同步-信号量(semaphore) 生产者与消费者问题再思考 在实际生活中,仅仅要有商品.消费者就能够消费,这没问题. 但生产者的生产并非无限的.比如,仓库是有限的,原材料是有限的,生产指标受消费 ...

  3. android几个高速打包命令

    在MTK  android4.4 上,有几条命令能够高速打包system uaserdata bootimage,可提高效率. snod:这个命令是能够高速打包system.是不会运行android各 ...

  4. Gif验证码类

    package com.paic.bics.common.utils.vcode; import java.awt.AlphaComposite; import java.awt.Color; imp ...

  5. Vim i和a差别

    i是当前位置插入 a是当前文字的后面插入

  6. linux启动基本流程

    linux启动序列 1.CPU初始化    CPU自身初始化.从某个固定位置(0xfffffff0)取指令并运行,该指令为跳转指令.跳转到BIOS代码的首部. 2.装载BIOS    BIOS被固化在 ...

  7. Bootstrap popover源码分析

    /* ======================================================================== * Bootstrap: popover.js ...

  8. 关于Domain Sepcific Lang

    今天在看一些关于CO的东东 里面提到,用从语言派生出来的领域语言再去编写代码会大大加速开发进程 PHP应该是个典型的领域语言(Perl之于文本处理也是这样),虽然不是从什么其他领域派生出来的,但是使用 ...

  9. H264--3--NAL层的处理[6]

    ------------------------------H.264的NAL层处理 ------------------------------ H264以NALU(NAL unit)为单位来支持编 ...

  10. Linux/Android——Input系统之InputMapper 处理 (八)【转】

    本文转载自:http://blog.csdn.net/jscese/article/details/43561773 前文Linux/Android——Input系统之InputReader (七)介 ...