<!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. Python入门之面向对象的__init__和__new__方法

    Python入门之面向对象的__init__和__new__方法

  2. Lombok让pojo变得更优雅

    Lombok 采取注解的形式,标记在pojo上面,在编译后,自动生成相应的方法,像get.set.构造方法等都可以注解一键生成. 引入jar包: <dependency> <grou ...

  3. 面向对象初调用：foolish 电梯

    本周我们完成的任务是傻瓜电梯的调度,对于那十分十分详细的指导书,我感觉想要说明白题目要求,是做不到的,所以就把指导书贴出来给大家看了,,由于在下还不会网页制作,只能通过百度网盘了,https://pa ...

  4. STM32.SPI（25Q16）

    1.首先认识下W25Q16DVSIG, SOP8 SPI FLASH 16MBIT  2MB(4096个字节) (里面可以放字库,图片,也可以程序掉电不丢失数据放里面) 例程讲解: ① 1.用到SPI ...

  5. codevs1001 舒适的路线 - 贪心 - 并查集

    题目描述 Description Z小镇是一个景色宜人的地方,吸引来自各地的观光客来此旅游观光.Z小镇附近共有N(1<N≤500)个景点(编号为1,2,3,…,N),这些景点被M(0<M≤ ...

  6. P1471 方差

    题目 luogu 思路 \[\frac{1}{n}*\sum_{1}^{n}( a_{i}-A)^{2}\] \[\frac{1}{n}*\sum_{1}^{n}( a_{i}^2-2*A*a_{i} ...

  7. system.data.sqlite的源代码下载

    帮助文档 http://system.data.sqlite.org/index.html/doc/trunk/www/index.wiki 历史版本https://system.data.sqlit ...

  8. 【安装】Mysql在Linux上安装

    1.下载 下载地址:http://dev.mysql.com/downloads/mysql/5.6.html#downloads 下载版本:mysql-5.6.37-linux-glibc2.12- ...

  9. C语言通过枚举网卡，API接口可查看man 7 netdevice--获取接口IP地址

    /*代码来自StackOverflow: http://stackoverflow.com/questions/212528/linux-c-get-the-ip-address-of-local-c ...

  10. ajax实现highchart与数据库数据结合完整案例分析（三）---柱状折线图

    作者原创,未经博主允许,不可转载 在前面分析和讲解了用java代码分别实现饼状图和折线图,在工作当中,也会遇到很多用ajax进行异步请求 实现highchart. 先展示一下实现的效果图: 用ajax ...