运行效果：

<!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）的更多相关文章

  1. canvas一周一练 -- canvas绘制中国银行标志（4）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  2. canvas一周一练 -- canvas绘制饼图（3）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  3. canvas一周一练 -- canvas绘制太极图（6）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  4. canvas一周一练 -- canvas绘制马尾图案 （5）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  5. canvas一周一练 -- canvas绘制立体文字（2）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  6. canvas一周一练 -- canvas基础学习

    从上个星期开始,耳朵就一直在生病,里面长了个疙瘩,肿的一碰就疼,不能吃饭不能嗨 (┳＿┳)……在此提醒各位小伙伴,最近天气炎热,一定要注意防暑上火,病来如山倒呀~ 接下来我正在喝着5块一颗的药学习ca ...

  7. 【MATLAB】用MATLAB绘制奥运五环

    [MATLAB]用MATLAB绘制奥运五环 今天用MATLAB绘制了一个奥运五环,好吧,实际上是帮人做作业,嘿嘿. 贴代码: clear; clc; N = 1000; angle = linspac ...

  8. Python绘制奥运五环

    绘制奥运五环主要涉及到Python中的turtle绘图库运用: turtle.forward(distance) 向当前画笔方向移动distance像素长度 turtle.backward(dista ...

  9. 第一讲：使用html5——canvas绘制奥运五环

    <html> <head> <title>初识canvas</title> </head> <body> <canvas ...

随机推荐

  1. Solid Edge性质管理者 如何获取装配体的BOM表 物料清单

    工具-性质管理者 在里面可以输入每个文件的文件号,版本号,作者等信息   右击点击显示性质,你还可以添加或删除文件属性   把需要的属性更改好了之后,可以输出装配体的所有零件信息到Excel中,点击工 ...

  2. HTML5：理解head

    HTML文档的head部分,通常包含指定页面标题.为搜索引擎提供关于页面本身的信息.加载样式表,以及加载JavaScript文件(出于性能考虑.多数时候放在页面底部</body>标签结束前 ...

  3. Eclipse或SVN—怎样在Eclipse中安装SVNclient插件

    1.下载SVN插件,下载地址:http://download.csdn.net/download/wangshuxuncom/7638615 2.解压下载下来的压缩文件然后依据里面名为"使用 ...

  4. 记录一次node中台转发表单上传文件到后台过程

    首发掘金 记录一次node中台转发表单上传文件到后台过程 本篇跟掘金为同一个作者leung   公司几个项目都是三层架构模式即前台,中台(中间层),后台.前台微信端公众号使用vue框架,后台管理前端使 ...

  5. codeforces 552 C Vanya and Scales

    这个题的意思就是给出一个数m.以及一个以1为首元素.w为比例常数的等比数列,数列长度为101,数列中每一个数字最多仅仅能用一次.问是否存在xa+wb+--=wc+wd+--+we+m. 非常显然,换句 ...

  6. Android Jni层 创建 linux socket 出错问题解决

    问题: 想在Jni层创建 udp socket 与服务端通信,可是没有成功.最后发现居然是创建socket失败(代码例如以下) // create socket g_sd = socket(AF_IN ...

  7. html鼠标事件

    jsp鼠标事件汇总 onclick 单击时触发的事件,这个比较常用 ondblclick 双击时触发的事件 onmoucedown 鼠标按下时触发的事件(个人觉得与onclick异曲同工) onmou ...

  8. html5 弹性布局

    html5 弹性布局 一.移动开发常用技巧 Viewport基本知识 设置布局Viewport的各种信息1.width=device-width: 设置Viewport视口宽度等于设备宽度2.init ...

  9. HDU1851 A Simple Game

    一个关于SG的博弈游戏,对于某个堆有$M_i$和$L_i$,那么这个堆的SG值为 $$SG_i = M_i \%(L_i+1)$$ 为什么这道题的$SG$函数就是这样子的呢?四个字:手算打表!! $L ...

  10. sparksql语句

    (1)in 不支持子查询 eg. select * from src where key in(select key from test);支持查询个数 eg. select * from src w ...