运行效果：

<!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. node+express+mysql小例子

    连接:https://www.cnblogs.com/humaotegong/p/5671009.html https://www.cnblogs.com/mibear/p/nodejs.html?u ...

  2. 浅谈MySQL load data local infile细节 -- 从源码层面

    相信大伙对mysql的load data local infile并不陌生,今天来巩固一下这里面隐藏的一些细节,对于想自己动手开发一个mysql客户端有哪些点需要注意的呢? 首先,了解一下流程: 3个 ...

  3. String类的四个默认成员函数

    优化版的拷贝构造函数,先创建一个暂时实例tmp,接着把tmp._ptr和this->_ptr交换,因为tmp是一个局部变量.程序执行到该函数作用域外,就会自己主动调用析构函数.释放tmp._pt ...

  4. Wordpress3.9开启多网站配置配置nginx进行局域网測试.

    由于须要帮staff迁移一些数据, 所以想到了使用wordpress的多网站. 这个功能在wordpress3.0后就有了. 软件系统等信息:  OS: linux debian wheezy php ...

  5. 利用JFreeChart生成组合图表 (8) (转自 JSP开发技术大全)

    利用JFreeChart生成组合图表 (8) (转自 JSP开发技术大全) 14.8 利用JFreeChart生成组合图表  实例位置:光盘\mingrisoft\14\dxyy\02 通过JFree ...

  6. 【JSOI 2011】 分特产

    [题目链接] 点击打开链接 [算法] 考虑求每个人可以不分的方案 那么,对于每件物品,我们把它分成n份,每一份对应分给每一个人,有C(a[i]+n-1,m-1)种方案,而总方案数就是每种 物品方案数的 ...

  7. Redis: Redis on Windows Setup

    ylbtech-Redis: Redis on Windows Setup 1.返回顶部 1. 2. 3. 4. 5. 6. 7. 8. 9. 2.返回顶部   3.返回顶部   4.返回顶部   5 ...

  8. SpringBoot中使用spring-data-jpa 数据库操作(下)

  9. Maximum Gap 典型线性排序

    https://leetcode.com/problems/maximum-gap/ Given an unsorted array, find the maximum difference betw ...

  10. LVS的持久连接、会话保持和高可用介绍

    持续连接 1)持久连接(lvs persistence)模板: 实现无论使用任何调度算法,在一段时间内(默认360s),能够实现将来自同一个地址的请求始终发往同一个RS ipvsadm -A|E -t ...