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 ...
随机推荐
- Solid Edge性质管理者 如何获取装配体的BOM表 物料清单
工具-性质管理者 在里面可以输入每个文件的文件号,版本号,作者等信息 右击点击显示性质,你还可以添加或删除文件属性 把需要的属性更改好了之后,可以输出装配体的所有零件信息到Excel中,点击工 ...
- HTML5:理解head
HTML文档的head部分,通常包含指定页面标题.为搜索引擎提供关于页面本身的信息.加载样式表,以及加载JavaScript文件(出于性能考虑.多数时候放在页面底部</body>标签结束前 ...
- Eclipse或SVN—怎样在Eclipse中安装SVNclient插件
1.下载SVN插件,下载地址:http://download.csdn.net/download/wangshuxuncom/7638615 2.解压下载下来的压缩文件然后依据里面名为"使用 ...
- 记录一次node中台转发表单上传文件到后台过程
首发掘金 记录一次node中台转发表单上传文件到后台过程 本篇跟掘金为同一个作者leung 公司几个项目都是三层架构模式即前台,中台(中间层),后台.前台微信端公众号使用vue框架,后台管理前端使 ...
- codeforces 552 C Vanya and Scales
这个题的意思就是给出一个数m.以及一个以1为首元素.w为比例常数的等比数列,数列长度为101,数列中每一个数字最多仅仅能用一次.问是否存在xa+wb+--=wc+wd+--+we+m. 非常显然,换句 ...
- Android Jni层 创建 linux socket 出错问题解决
问题: 想在Jni层创建 udp socket 与服务端通信,可是没有成功.最后发现居然是创建socket失败(代码例如以下) // create socket g_sd = socket(AF_IN ...
- html鼠标事件
jsp鼠标事件汇总 onclick 单击时触发的事件,这个比较常用 ondblclick 双击时触发的事件 onmoucedown 鼠标按下时触发的事件(个人觉得与onclick异曲同工) onmou ...
- html5 弹性布局
html5 弹性布局 一.移动开发常用技巧 Viewport基本知识 设置布局Viewport的各种信息1.width=device-width: 设置Viewport视口宽度等于设备宽度2.init ...
- HDU1851 A Simple Game
一个关于SG的博弈游戏,对于某个堆有$M_i$和$L_i$,那么这个堆的SG值为 $$SG_i = M_i \%(L_i+1)$$ 为什么这道题的$SG$函数就是这样子的呢?四个字:手算打表!! $L ...
- sparksql语句
(1)in 不支持子查询 eg. select * from src where key in(select key from test);支持查询个数 eg. select * from src w ...