运行效果：

<!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. js中的封装、继承、多态

    Javascript是一门解释型的语言,是基于对象的,并不是真正的面向对象的语言,对变量类型的应用也是宽松的,其实它同样可以模拟面向对象的功能:  1 function myfun1(){  2    ...

  2. git基础之创建ssh公钥和密钥

    用git管理过程中,不想每次输入username和password.解决的方法例如以下; 1 . 链接换成ssh协议. 2 . 生成公钥. 3. 加入ssh公钥到gitserver. 打开gitbas ...

  3. 用JAVA生成老电影海报

    先看图,再讲原理.生成效果对照: 机器全自己主动生成.是不是非常酷炫?:) 数字图像,由无数个像素组成,通常情况下,每一个像素包括有RGB三个值,算法原理事实上非常easy: 一,遍历全部像素,将RG ...

  4. tensorflow,torch tips

    apply weightDecay,L2 REGULARIZATION_LOSSES weights = tf.get_collection(tf.GraphKeys.TRAINABLE_VARIAB ...

  5. android开发真机调试 相关东东

    android开发真机调试 相关东东 我们做android开发的时候,可以用模拟器,也可以真机调试,但是电脑配置不高的话,模拟器,真的是慢的有的一说,所以我一直倾向于用真机调试,但是问题也就来了,模拟 ...

  6. 第一个GraphX程序

    程序功能:收集顶点指向的邻居中所在地 /* * 找出每一个顶点所指向的邻居中所在的地区 */ import org.apache.spark.SparkContext import org.apach ...

  7. Linux服务器 /var/spool/clientmqueue 目录下产生大量文件的删除办法

    检查linux发现server中的磁盘分区空间超过98%,登录到服务器查看 [root@localhost etc]# df -hFilesystem 容量 已用 可用 已用% 挂载点/dev/hda ...

  8. robo 3t 在 ubuntu下安装

    如果您尝试安装最新版本robomobo调用可以现在robo3t.或者你尝试在Ubuntu 16.04上安装,按照下面的步骤和你的robomongo安装 下载最新的robomongo tar文件 wge ...

  9. eclipse导出签名apk的混淆设置

    1.设置project.properties文件: 2.设置proguard-project.txt文件:

  10. 杂项-Java：JSP

    ylbtech-杂项-Java:JSP 1.返回顶部 1. JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它是由Sun Micros ...