运行效果：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. </head>
  5. <body>
  6. <canvas id="drawing" width="" height="">A drawing of someing!</canvas>
  7.     <script type="text/javascript">
  8.         var drawing = document.getElementById('drawing');
  9.         if(drawing.getContext) {
  10.             //绘制奥运五环，画圆
  11.             var context = drawing.getContext('2d');
  12.             context.lineWidth = ;
  13.             context.strokeStyle = '#0180C3';
  14.             context.beginPath();
  15.             context.arc(, , , , *Math.PI, false);
  16.             context.stroke();
  17.             context.strokeStyle = '#000';
  18.             context.beginPath();
  19.             context.arc(, , , , *Math.PI, false);
  20.             context.stroke();
  21.             context.strokeStyle = '#BF0628';
  22.             context.beginPath();
  23.             context.arc(, , , , *Math.PI, false);
  24.             context.stroke();
  25.             context.strokeStyle = '#EBC41F';
  26.             context.beginPath();
  27.             context.arc(, , , , *Math.PI, false);
  28.             context.stroke();
  29.             context.strokeStyle = '#198E4A';
  30.             context.beginPath();
  31.             context.arc(, , , , *Math.PI, false);
  32.             context.stroke();
  33.             //环环相扣，画弧（实现相关圆弧的覆盖）
  34.             context.strokeStyle = '#0180C3';
  35.             context.beginPath();
  36.             context.arc(, , , 1.9*Math.PI, 2.1*Math.PI, false);
  37.             context.stroke();
  38.             context.strokeStyle = '#000';
  39.             context.beginPath();
  40.             context.arc(, , , 1.9*Math.PI, 2.1*Math.PI, false);
  41.             context.stroke();
  42.             context.beginPath();
  43.             context.arc(, , , 0.5*Math.PI, 0.7*Math.PI, false);
  44.             context.stroke();
  45.             context.strokeStyle = '#BF0628';
  46.             context.beginPath();
  47.             context.arc(, , , 0.5*Math.PI, 0.7*Math.PI, false);
  48.             context.stroke();
  49.         }
  50.  
  51.     </script>
  52. </body>
  53. </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. form 表单序列化 serialize

    在开发中有时需要在js中提交form表单数据,就需要将form表单进行序列化. jquery提供的serialize方法能够实现. $("#searchForm").seriali ...

  2. HDU 4950 Monster(公式)

    HDU 4950 Monster 题目链接 题意:给定怪兽血量h,你攻击力a.怪物回血力b,你攻击k次要歇息一次,问是否能杀死怪兽 思路:签到题,注意最后一下假设打死了怪,那么怪就不会回血了 思路: ...

  3. selenium第三课（selenium八种定位页面元素方法）

    selenium webdriver进行元素定位时,通过seleniumAPI官方介绍,获取页面元素的方式一共有以下八种方式,现按照常用→不常用的顺序分别介绍一下. 官方api地址:https://s ...

  4. 小工具：天气查询 Vs自定义设置 DevGridControl中GridView排序问题 小工具：火车票查询 小工具：邮件发送 小工具：截图&简单图像处理

    小工具:天气查询   开发一个天气查询的工具主要由两步构成,一是数据的获取,二是数据的展示.  一.数据获取 数据获取又可以分为使用其它公司提供的API和手动抓取其它网站数据. 1. 某公司提供的AP ...

  5. FineUI之使用SQL脚本从数据库表中生成对应的输入控件

    在WEB开发时.常常须要根据数据库表中的字段建立对应的输入控件,来获取输入的数据.每次都须要按字段来敲,显然太低效.并且easy出错.这里提供一个SQL脚本生成对应输入控件的方法. USE DBDem ...

  6. 【Qt入门实践】Qt之哲学家问题（linux 多线程）

    转载请注明出处:http://blog.csdn.net/feng1790291543 linux多线程实现哲学家问题,依据哲学家吃饭.拿筷子.放下筷子...... watermark/2/text/ ...

  7. Msql入门实战之下

    前面一章主要解说了mysql的select的使用方法.将select的大部分使用方法进行分别解说.本章主要解说Msql约束表的建立,以及存储过程的实现,附带其它介绍.临时就算入门了,Mysql索引之后 ...

  8. java8新特性-方法引用

    方法引用:若 Lambda 体中的功能,已经有方法提供了实现,可以使用方法引用 (可以将方法引用理解为 Lambda 表达式的另外一种表现形式) 1. 对象的引用 :: 实例方法名2. 类名 :: 静 ...

  9. 配置Cocos Code IDE 可以正常运行的组合：jdk,sdk ,ndk, ant, cocos2d-x

    Cocos Code IDE:Cocos Code IDE 1.0.0-RC2 jdk:Cocos Code IDE 自动的jdk sdk:8以上 ndk:r9d(r10有bug),希望以后版本可以修 ...

  10. SAM入门

    学了两天,会了点皮毛,这里只放代码. P3804 #include<iostream> #include<cstdio> #include<cmath> #incl ...