canvas一周一练 -- canvas绘制太极图(6)
运行效果:
<!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)的更多相关文章
- canvas一周一练 -- canvas绘制中国银行标志(4)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制饼图(3)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制马尾图案 (5)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制立体文字(2)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制奥运五环(1)
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas基础学习
从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳_┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...
- canvas学习总结三:绘制路径-线段
Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText() ...
- 【canvas学习笔记二】绘制图形
上一篇我们已经讲述了canvas的基本用法,学会了构建canvas环境.现在我们就来学习绘制一些基本图形. 坐标 canvas的坐标原点在左上角,从左到右X轴坐标增加,从上到下Y轴坐标增加.坐标的一个 ...
- canvas学习总结六:绘制矩形
在第三章中(canvas学习总结三:绘制路径-线段)我们提高Canvas绘图环境中有些属于立即绘制图形方法,有些绘图方法是基于路径的. 立即绘制图形方法仅有两个strokeRect(),fillRec ...
随机推荐
- [WebGL入门]五,矩阵的基础知识
注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明.我会加上[lufy:],另外.鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指 ...
- oracle导入命令,记录一下 数据库日志太大,清理日志文件
oracle导入命令,记录一下 工作中用到了,这个命令,记录一下,前提要安装imp.exe imp PECARD_HN/PECARD_HN@127.0.0.1:1521/orcl file=E:\wo ...
- Go 语言的下一个大版本:Go 2.0 被安排上了(全面兼容1.X,改进错误处理和泛型这两大主题)
今年 8 月 Go 开发团队公布了 Go 2.0 的设计草案,包括错误处理和泛型这两大主题.现在备受瞩目的 Go 2.0 又有了新动向 —— 昨日 Go 开发团队在其官方博客表示,Go 2 已经被安排 ...
- luogu1314 聪明的质检员
题目大意 小 T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有 n 个矿石,从 1 到 n 逐一编号,每个矿石都有自己的重量 wi 以及价值 vi.检验矿产的流程是: 1.给定 m 个区 ...
- HDU 5976 Detachment 【贪心】 (2016ACM/ICPC亚洲区大连站)
Detachment Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total ...
- 【Android】Android输入子系统【转】
本文转载自:https://www.cnblogs.com/lcw/p/3506110.html Linux输入子系统回顾 1:为什么要回顾linux输入子系统?这个问题后面自然就知道了 1.linu ...
- mac 下idea光标问题
可以使用 fn + i 解决此问题
- 昆石VOS3000_2.1.2.0完整安装包及安装脚本
安装包下载地址 http://www.51voip.org/post/57.html 安装教程: 上传安装包 ·给整个目录授权 chmod 777 /root/vosintsall 1.安装前准备 首 ...
- apache相关补充
apache相关补充 sendfile机制 1)不用sendfile的传统网络传输过程: read(file, tmp_buf, len) write(socket, tmp_buf, len) 2) ...
- 测试DNS服务的命令
测试DNS服务的命令 dig dig用于测试dns系统,因此不会查询hosts文件进行解析. dig - DNS lookup utility dig [@global-server] [domain ...