运行效果：

<!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. socket 由浅入深系列------ 原理（一）

    来自:网络整理 个人觉得写一个网络应用程序没有是一件非常easy的事.其实,我们刚開始的时候总觉得的原则: 建立------>连接套接字------->接受一个连接---->发送数据 ...

  2. 七夕节 看到很多停止更新的blog 莫名有点淡淡的忧桑

    又是一年七夕.又是一年单身.看到很多停止更新的blog, 仿佛看到了一茬一茬的程序猿 进入it 圈 又离开it圈,就有莫名的忧桑

  3. 蓝桥杯 地宫寻宝 带缓存的DFS

      历届试题 地宫取宝   时间限制:1.0s   内存限制:256.0MB      问题描写叙述 X 国王有一个地宫宝库. 是 n x m 个格子的矩阵. 每一个格子放一件宝贝. 每一个宝贝贴着价 ...

  4. mongodb由于目标计算机积极拒绝无法连接失败

    这不是mongodb无法启动,是你还没有启动mongodb就来连接使用它了,肯定是不成功的.安装完mongodb后先将bin目录在环境变量下写入path然后在bin同级目录下创建一个db文件夹接着运行 ...

  5. 【bzoj4196】[Noi2015]软件包管理器

    裸的树链剖分. 对于安装 查询和维护到根路径 对于卸载 查询和维护子树信息 一开始线段树add[]标记要全赋值为-1 #include<algorithm> #include<ios ...

  6. struts 模块化

    <struts> <!-- 包含了三个配置文件 --> <!-- 不指定路径默认在src下时的方式 --> <include file="strut ...

  7. npm安装以及命令行

    安装visual studio的时候,安装Node.js会同时安装npm 查看版本 PS C:\Users\clu\Desktop> npm --version5.6.0 PS C:\Users ...

  8. 【Codeforces】716D Complete The Graph

    D. Complete The Graph time limit per test: 4 seconds memory limit per test: 256 megabytes input: sta ...

  9. jquery uploadify在谷歌浏和火狐下无法上传的解决方案(.Net版)

    在项目紧张的进行过程中,jquery uploadify上传不兼容的问题一直没有试着去解决,只幻想着用ie的人越来越多,怎么奈何firefox4刚推出,就有4000万的下载.......仰天长叹,记生 ...

  10. 将数据从数据仓库Hive导入到MySQL

    1.启动Hadoop,hive,mysql 2.在mysql中建表(需要导入数据的) mysql> CREATE TABLE `dbtaobao`.`user_log` (`user_id` v ...