<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>奥运五环</title>
</head>
<body>
  <canvas id="myCanvas"  width="500" height="500" style="border-style:dashed;border-width:thin"></canvas>

<script>
        /*arc(x, y, radius, startAngle, endAngle, counterclockwise)
        参数 描述
        x, y 描述弧的圆形的圆心的坐标。
        radius 描述弧的圆形的半径。
        startAngle, endAngle 沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。
        沿着 X 轴正半轴的三点钟方向的角度为 0，角度沿着逆时针方向而增加。
        counterclockwise 弧沿着圆周的逆时针方向（TRUE）还是顺时针方向（FALSE）遍历。*/

var canvas = document.getElementById("myCanvas");
        //返回绘图对象
        var ctx = canvas.getContext("2d");
        //坐标，圆半径
        ctx.lineWidth = 5;
        ctx.strokeStyle = "#163B62";
        ctx.beginPath();
        ctx.arc(70, 70, 40, 0, Math.PI * 2, false);
        ctx.stroke();

ctx.strokeStyle = "#000000";
        ctx.beginPath();
        ctx.arc(160, 70, 40, 0, Math.PI * 2, false);
        ctx.stroke();

ctx.strokeStyle = "#BF0628";
        ctx.beginPath();
        ctx.arc(250, 70, 40, 0, Math.PI * 2, false);
        ctx.stroke();

ctx.strokeStyle = "#EBC41F";
        ctx.beginPath();
        ctx.arc(110, 110, 40, 0, Math.PI * 2, false);
        ctx.stroke();

ctx.strokeStyle = "#198E4A";
        ctx.beginPath();
        ctx.arc(200, 110, 40, 0, Math.PI * 2, false);
        ctx.stroke();

//开始调节
        ctx.strokeStyle = "#163B62";
        ctx.beginPath();
        ctx.arc(70, 70, 40, Math.PI * 1, Math.PI * 2.4, false);
        ctx.stroke();

ctx.strokeStyle = "#000000";
        ctx.beginPath();
        ctx.arc(160, 70, 40, Math.PI * 1.6, Math.PI * 2.3, false);
        ctx.stroke();

ctx.strokeStyle = "#BF0628";
        ctx.beginPath();
        ctx.arc(250, 70, 40, Math.PI * 2, Math.PI * 2.9, false);
        ctx.stroke();

ctx.strokeStyle = "#000000";
        ctx.beginPath();
        ctx.arc(160, 70, 40, Math.PI * 2, Math.PI * 2.8, false);
        ctx.stroke();

</script>
</body>
</html>

使用路径arc-奥运五环的更多相关文章

  1. canvas一周一练 -- canvas绘制奥运五环（1）

    运行效果: <!DOCTYPE html> <html> <head> </head> <body> <canvas id=" ...

  2. 【MATLAB】用MATLAB绘制奥运五环

    [MATLAB]用MATLAB绘制奥运五环 今天用MATLAB绘制了一个奥运五环,好吧,实际上是帮人做作业,嘿嘿. 贴代码: clear; clc; N = 1000; angle = linspac ...

  3. Python绘制奥运五环

    绘制奥运五环主要涉及到Python中的turtle绘图库运用: turtle.forward(distance) 向当前画笔方向移动distance像素长度 turtle.backward(dista ...

  4. Div+Css中transparent制作奥运五环

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. python3 turtle画正方形、矩形、正方体、五角星、奥运五环

    python3 环境 turtle模块 分别画出 正方形.矩形.正方体.五角星.奥运五环 #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:H ...

  6. 【scratch3.0教程】 2.3 奥运五环

    (1)编程前的准备 在设计一个作品之前,必须先策划一个脚本,然后再根据脚本,收集或制作素材(图案,声音等),接着就可以启动Scratch,汇入角色.舞台,利用搭程序积木的方式编辑程序,制作出符合脚本的 ...

  7. html+css实现奥运五环(环环相扣)

    <!DOCTYPE html> <html> <head> <title>奥运五环</title> <style type=" ...

  8. python使用turtle库绘制奥运五环

    效果图: #奥运五环 import turtle turtle.setup(1.0,1.0) #设置窗口大小 turtle.title("奥运五环") #蓝圆 turtle.pen ...

  9. 使用路径arc

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>    < ...

随机推荐

  1. （七）git分支的操作

    1.git branch——显示分支一览表 2.git checkout -b——创建.切换分支 往feature-A中不断add.commit叫培育分支 git checkout - 切回上一个分支 ...

  2. Python Web学习笔记之TCP、UDP、ICMP、IGMP的解释和区别

    TCP与UDP解释 TCP---传输控制协议,提供的是面向连接.可靠的字节流服务.当客户和服务器彼此交换数据前,必须先在双方之间建立一个TCP连接,之后才能传输数据.TCP提供超时重发,丢弃重复数据, ...

  3. JS获取周、月、季度日期

    效果: 代码: //用于获取日期本周.本月.本季度的js //Author : guanghe //文件引用方法:<script src="${staticPath}/common/j ...

  4. Eclipse中把Java工程修改成web工程

    Eclipse中把Java工程修改成web工程 点击项目:右击:选择properties--输入project facets,将“Dynamic Web Module”打勾即可:

  5. web应用下的安全问题以及tomcat/nginx对应解决方法（持续更新、亲测可解决问题）

    最近一券商那边扫描反馈了下面几个非业务型安全漏洞,要求解决,如下: XSS 自己写个脚本response的时候对特殊字符进行了处理,或者网上搜下一堆(不要忘了回车.换行). HTML form wit ...

  6. 20145105 《Java程序设计》实验二总结

    实验二 Java面向对象程序设计 一. 实验内容: 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.多态.建模 初步掌握UML 熟悉S.O.L.I.D原则 了解设计模式 二. 实验步骤 (一 ...

  7. 20145222何志威《网络对抗》- Web安全基础实践

    20145322何志威<网络对抗>Exp9 Web安全基础实践 基础问题回答 1.SQL注入原理,如何防御 SQL注入 就是通过把SQL命令插入到"Web表单递交"或& ...

  8. python中command执行shell命令脚本方法

    在Python中有一个模块commands也很容易做到以上的效果.看一下三个函数:1). commands.getstatusoutput(cmd)用os.popen()执行命令cmd, 然后返回两个 ...

  9. ubuntu下桌面假死处理方法(非重启)

    一.背景 2018/05/22,就在这一天,进入ubuntu的桌面后随便点击任何位置均无法响应,此时又不想重启,遂出此文 二.解决方案 2.1 关掉Xorg进程 2.1.1按下ctrl+alt+F1进 ...

  10. Wireshark过滤总结

    Wireshark提供了两种过滤器:捕获过滤器:在抓包之前就设定好过滤条件,然后只抓取符合条件的数据包.显示过滤器:在已捕获的数据包集合中设置过滤条件,隐藏不想显示的数据包,只显示符合条件的数据包.需 ...