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 ...
随机推荐
- [Java Sprint] Spring XML Configuration : Setter Injection Demo
In CustomerServiceImpl.java, we hardcoded 'HibernateCustomerRepositoryImpl' package com.pluralsight. ...
- oralce之复杂查询举例
表结构: S(SNO,SNAME) 代表 学号.学生姓名: C(CNO,CNAME,CTEACHER) 代表 课号,课程名称.授课老师 SC(SNO,CNO,SCGRADE) 代表 学号.课号.课程成 ...
- 在HDInsight中从Hadoop的兼容BLOB存储查询大数据的分析
在HDInsight中从Hadoop的兼容BLOB存储查询大数据的分析 低成本的Blob存储是一个强大的.通用的Hadoop兼容Azure存储解决方式无缝集成HDInsight.通过Hadoop分布式 ...
- php生成二维码2
<?php include "phpqrcode.php"; $value = "http://huizhongda.taobao.com/"; $err ...
- C++入门学习——模板
为什么须要模板? 我们已经学过重载(Overloading),对重载函数而言,C++ 通过函数參数(參数个数.參数类型)的正确匹配来调用重载函数.比如.为求两个数的最大值,我们定义 max () 函数 ...
- SPOJ 15. The Shortest Path 最短路径题解
本题就是给出一组cities.然后以下会询问,两个cities之间的最短路径. 属于反复询问的问题,临时我仅仅想到使用Dijsktra+heap实现了. 由于本题反复查询次数也不多,故此假设保存全部最 ...
- TensorFlow的安装与CNN测试
0.说明 在Google开源该框架之后便使用真实K40m卡测试,由于生产环境是CentOS6.6的操作系统,但是该框架需要在Python2.7环境下执行,CentOS6.6下折腾了一天没搞定,后来换成 ...
- [Java] 监控java对象回收的原理与实现
监控Java对象回收的原理与实现 一.监控Java对象回收的目的 监控Java对象是否回收的目的是:为了实现内存泄露报警. 内存泄露是指程序中对象生命周期(点击查看详情)已经进入不可见阶段,但因为编码 ...
- [办公自动化]PPT文件太大,如何压缩?
如果你经常需要制作PPT,文件太大的确是个问题. 那么应该如何压缩呢? 以office 2007为例 第一.可以选中图片,然后双击,在弹出的菜单栏中,选择压缩图片. 然后选择选项, 有三种比例可选,建 ...
- 【bzoj2728】[HNOI2012]与非
先打出nand表 0 nand 0=1 1 nand 1=0 0 nand 1=1 1 nand 0=1 容易发现(!a)=a nand a 然后(a&b)=!(a nand b) 然后( ...