canvas一周一练 -- canvas绘制奥运五环（1）
运行效果：
<!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.lineWidth = ;
context.strokeStyle = '#0180C3';
context.beginPath();
context.arc(, , , , *Math.PI, false);
context.stroke();
context.strokeStyle = '#000';
context.beginPath();
context.arc(, , , , *Math.PI, false);
context.stroke();
context.strokeStyle = '#BF0628';
context.beginPath();
context.arc(, , , , *Math.PI, false);
context.stroke();
context.strokeStyle = '#EBC41F';
context.beginPath();
context.arc(, , , , *Math.PI, false);
context.stroke();
context.strokeStyle = '#198E4A';
context.beginPath();
context.arc(, , , , *Math.PI, false);
context.stroke();
//环环相扣，画弧（实现相关圆弧的覆盖）
context.strokeStyle = '#0180C3';
context.beginPath();
context.arc(, , , 1.9*Math.PI, 2.1*Math.PI, false);
context.stroke();
context.strokeStyle = '#000';
context.beginPath();
context.arc(, , , 1.9*Math.PI, 2.1*Math.PI, false);
context.stroke();
context.beginPath();
context.arc(, , , 0.5*Math.PI, 0.7*Math.PI, false);
context.stroke();
context.strokeStyle = '#BF0628';
context.beginPath();
context.arc(, , , 0.5*Math.PI, 0.7*Math.PI, false);
context.stroke();
} </script>
</body>
</html>
canvas一周一练 -- canvas绘制奥运五环（1）的更多相关文章
- canvas一周一练 -- canvas绘制中国银行标志（4）
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制饼图（3）
运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...
- canvas一周一练 -- canvas绘制太极图（6）
运行效果: <!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基础学习
从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳＿┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...
- 【MATLAB】用MATLAB绘制奥运五环
[MATLAB]用MATLAB绘制奥运五环 今天用MATLAB绘制了一个奥运五环,好吧,实际上是帮人做作业,嘿嘿. 贴代码: clear; clc; N = 1000; angle = linspac ...
- Python绘制奥运五环
绘制奥运五环主要涉及到Python中的turtle绘图库运用: turtle.forward(distance) 向当前画笔方向移动distance像素长度 turtle.backward(dista ...
- 第一讲：使用html5——canvas绘制奥运五环
<html> <head> <title>初识canvas</title> </head> <body> <canvas ...
随机推荐
- iOS自己定义返回button(不影响返回手势)
此方法能够自己定义返回button,且不影响返回手势. 新方法: self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] in ...
- Objective-C语言的 if ( self = [super init] )
我们先假设如今自己创建了个类.我们起名叫MyObject,继承于NSObject. 继承知道吧,就是你这个子类(MyObject)假设什么都不写的话,和父类(NSObject)就是一模一样的. OC里 ...
- HDUOJ Number Sequence 题目1005
/*Number Sequence Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Oth ...
- lua-5.2.3编译问题记录"libreadline.so: undefined reference to `PC'"
作者:zhanhailiang 日期:2014-10-21 [root@~/software]# cd lua-5.2.3 [root@~/software/lua-5.2.3]# make linu ...
- Linux服务器 /var/spool/clientmqueue 目录下产生大量文件的删除办法
检查linux发现server中的磁盘分区空间超过98%,登录到服务器查看 [root@localhost etc]# df -hFilesystem 容量 已用 可用 已用% 挂载点/dev/hda ...
- 网络流之最大流算法(EK算法和Dinc算法）
最大流 网络流的定义: 在一个网络(有流量)中有两个特殊的点,一个是网络的源点(s),流量只出不进,一个是网络的汇点(t),流量只进不出. 最大流:就是求s-->t的最大流量 假设 u,v 两个 ...
- 【HDU 3652】 B-numbers
[题目链接] 点击打开链接 [算法] 数位DP f[i][j][k][l]表示i位数,第一位为j,除以13的余数为k,是/否包括子串“13”的方案数 当然,我们也可以先打表,然后,对于每次询问,二分即 ...
- Java多线程 -- 正确使用Volatile变量
Java 语言中的 volatile 变量可以被看作是一种 “程度较轻的 synchronized”:与 synchronized 块相比,volatile 变量所需的编码较少,并且运行时开销也较少, ...
- TI BLE: Advertisement
#define GAPROLE_ADVERT_ENABLED 0x305 //!< Enable/Disable Advertising. Read/Write. Size is uint8. ...
- Vsftpd软件包的获取与安装
11.2 Vsftpd简介 Vsftpd是一种在GPL许可下开放源代码的FTP服务器,用于多种UNIX系统和Linux系统.Vsftpd也称为Very Secure FTP Daemon,它是一种安 ...