运行效果：

<!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. label显示不同颜色的字体

    NSString *contentSrt = [NSString stringWithFormat:@"%@ (%@)",categoryModel.categoryName, c ...

  2. yarn之安装依赖包

    安装依赖关系 yarn install用于安装项目的所有依赖项.依赖关系从您的项目package.json文件中检索,并存储在yarn.lock文件中. 开发包时,安装依赖关系最常见的是在 您刚刚检出 ...

  3. SQL语句小结

    1.创建数据库 create database 数据库名 2.删除数据库 drop  database 数据库名 3.创建表 1>.create table 表名 (col1 type1 [no ...

  4. A星算法（Java实现）

    一.适用场景 在一张地图中.绘制从起点移动到终点的最优路径,地图中会有障碍物.必须绕开障碍物. 二.算法思路 1. 回溯法得到路径 (假设有路径)採用"结点与结点的父节点"的关系从 ...

  5. Windows 驱动开发 - 7

    在<Windows 驱动开发 - 5>我们所说的读写操作在本篇实现. 在WDF中实现此功能主要为:EvtIoRead和EvtIoWrite. 首先,在EvtDeviceAdd设置以上两个回 ...

  6. js 对有“命名空间”的表单做深度解析

    问题描写叙述:一个大表单中,可能包括几十个字段.这些字段在数据库中的映射非常可能不在一张表中,为了降低后台操作的工作量,我们应该在前台提交的时候对数据做初步处理. 举例说明: watermark/2/ ...

  7. jquery 页面滚动tab自动定位，tab与内容对应

    直接上源码,基于jquery写的,可以直接跑起来. 原理是先计算出页面元素对应的高度.页面滚动时计算tab对应的高端区间,设置具体的tab.欢迎指正 下载地址 <!DOCTYPE html> ...

  8. Unity3D游戏开发最佳实践20技巧（一）

    关于这些技巧这些技巧不可能适用于每一个项目. 这些是基于我的一些项目经验.项目团队的规模从3人到20人不等. 框架结构的可重用性.清晰程度是有代价的--团队的规模和项目的规模决定你要在这个上面付出多少 ...

  9. JS 通过选择百度地图地址获取经纬度自动填充到文本框中的方法

    首先要注册百度地图API. 1.登录百度地图开放平台http://lbsyun.baidu.com 注册账号,完善信息,点击网站右上角的“API控制台”,点击,创建应用. 应用类型选择:“浏览器端”, ...

  10. 洛谷 P1759 通天之潜水

    P1759 通天之潜水 19通过 65提交 题目提供者lych 标签动态规划洛谷原创 难度普及/提高- 提交该题 讨论 题解 记录 最新讨论 暂时没有讨论 题目背景 直达通天路·小A历险记第三篇 题目 ...