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 ...
随机推荐
- 重置网络命令win7
开始→运行→输入:CMD 点击确定(或按回车键),打开命令提示符窗口. 在命令提示符中输入:netsh winsock reset (按回车键执行命令) 稍后,会有成功的提示:成功地重置Winsock ...
- 华为OJ2011-最长公共子串
一.题目描述 描述: 计算两个字符串的最大公共子串(Longest Common Substring)的长度,字符区分大小写. 输入: 输入两个字符串 输出: 输出一个整数 样例输入: asdfas ...
- java7新特性之Try-with-resources (TWR)
java7新特性之Try-with-resources (TWR) This change is easy to explain, but it has proved to have hidden s ...
- ZOJ3662:Math Magic(全然背包)
Yesterday, my teacher taught us about math: +, -, *, /, GCD, LCM... As you know, LCM (Least common m ...
- 《ASP.NET4 从入门到精通》学习笔记4
第4部分诊断与插件 刚開始看这章的时候,真实一头雾水.不知道在讲什么.只是看了关于http pipeline之后.才了解相关说明. 因此对于这一章的学习,建议各位首先看看http pipeline然后 ...
- 【bzoj3676】[Apio2014]回文串 —— 回文自动机的学习
写题遇上一棘手的题,[Apio2014]回文串,一眼看过后缀数组+Manacher.然后就码码码...过是过了,然后看一下[Status],怎么慢这么多,不服..然后就搜了一下,发现一种新东西——回文 ...
- rabbitmq最大连接数（Socket Descriptors）
RabbitMQ自带了显示能够接受的最大连接数,有2种比较直观的方式:1. rabbitmqctl命令. 1 2 3 4 5 6 7 8 9 10 11 12 <span style=" ...
- android 使用AlarmManager定时启动service
private static AlarmManager am; private static PendingIntent pendingIntent; /** * 使用 AlarmManager 来 ...
- TI BLE: Advertisement
#define GAPROLE_ADVERT_ENABLED 0x305 //!< Enable/Disable Advertising. Read/Write. Size is uint8. ...
- libnids 中哈希表的建立
//hash.c #include <sys/types.h>#include <sys/time.h>#include <stdio.h>#include < ...