运行效果：

<!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. C/C++一些库函数的实现

    1. 写出String的具体实现 类的定义: #include <iostream> #include <cstring> using namespace std; class ...

  2. HDU-4643-GSM(DFS)

    Problem Description Xiao Ming is traveling around several cities by train. And the time on the train ...

  3. 2015/12/30 Java语法学习

    ①标识符包括:包名.类名.方法名.变量名.常量名.属性名 标识符书写规则:1,标识符由字母.数字._.$ 组成                      2,数字不能出现在开始位置          ...

  4. Linux/Android——Input系统之InputReader (七)【转】

    本文转载自:http://blog.csdn.net/jscese/article/details/42739197 在前文Linux/Android——Input系统之frameworks层Inpu ...

  5. T4 最小差异值 dvalue

    T4 最小差异值 dvalue [问题描述] P 省刚经历一场不小的地震,所有城市之间的道路都损坏掉了,所以省长想请你将城市之间的道路重修一遍. 因为很多城市之间的地基都被地震破坏导致不能修公路了,所 ...

  6. Codeforces Round #395 (Div. 1)

    比赛链接:http://codeforces.com/contest/763 A题: #include <iostream> #include <cstdio> #includ ...

  7. 关于Flask的默认session

    Flask的默认session利用了Werkzeug的SecureCookie,把信息做序列化(pickle)后编码(base64),放到cookie里了. 过期时间是通过cookie的过期时间实现的 ...

  8. POJ3709 K-Anonymous Sequence 斜率优化DP

    POJ3709 题意很简单 给n个递增整数(n<=500000)和一种操作(选择任意个数 使他们减少整数值) 使得对于所有的整数 在数列中 有k个相等的数 O(n^2)的DP方程很容易得出 如下 ...

  9. codeforces round #428 div2

    A:暴力模拟,能加就加,如果累计到了8就加上,每次累积 #include<bits/stdc++.h> using namespace std; int main() { ; scanf( ...

  10. Spark 多项式逻辑回归__多分类

    package Spark_MLlib import org.apache.spark.ml.Pipeline import org.apache.spark.ml.classification.{B ...