运行效果：

<!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. C# .NET Visual Studio VS2008如何显示行号

    工具-选项,然后勾选"显示所有设置",然后在文本编辑器下面找到所有语言,勾选"行号"即可.  

  2. 读书笔记：Information Architecture for the World Wide Web, 3rd Edition 北极熊 第一部分 1-3

    Introducing Information Architecture 信息架构简介 Chapter 1 Defining Information Architecture 信息架构的意义(我们盖房 ...

  3. Cannot change version of project facet Dynamic Web Module to 3.1 （Eclipse Maven唯一解决方式）

    If you want to use version 3.1 you need to use the following schema: http://xmlns.jcp.org/xml/ns/jav ...

  4. Delphi7目录结构

    Delphi7目录结构 打开Delphi的安装目录,如C:\Program Files\Borland\Delphi7,你将会看到目录下包含了一些文件和文件夹:Source:存放的是Delpi提供的所 ...

  5. Codesys——AD_DA在PID控制中的作用

    1. 摘要 PID控制中用到AD/DA的输入/输出,给出其大致实现思路. 2. 思路 3. 总结 无

  6. mysql中decimal的使用

    float,double,decimal区别 创建表test_float_double_decimal CREATE TABLE `test_float_double_decimal` ( `id` ...

  7. 7-74 JavaScript 事件

    7-74 JavaScript 事件 学习要点 掌握常用的javaScript事件 基本概念 事件是一些特定动作发生时所发出的信号,JavaScript中的事件是可以被 JavaScript 侦测到的 ...

  8. 【BZOJ 3732】 Network

    [题目链接] 点击打开链接 [算法] 求出这个图的最小生成树,对于每次询问,用倍增法求出最近公共祖先,查询最小生成树上两点路径上的最大值 算法的正确性?            假设x和y在最小生成树中 ...

  9. mybatis 注解写法 多层嵌套foreach，调用存储过程，批量插入数据

    @Select("<script>" + "DECLARE @edi_Invoice_Details edi_Invoice_Details;" + ...

  10. Django day 33 vue中使用element-ui的使用，课程的相关介绍，vue绑定图片，课程列表接口，课程详情页面

    一:vue中使用element-ui的使用, 二:课程的相关介绍, 三:vue绑定图片, 四:课程列表接口, 五:课程详情页面