<!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 Web学习笔记之Python多线程和多进程、协程入门

    进程和线程究竟是什么?如何使用进程和线程?什么场景下需要使用进程和线程?协程又是什么?协程和线程的关系和区别有哪些? 程序切换-CPU时间的分配 首先,我们的任何一个程序都需要运行在一个操作系统中,如 ...

  2. Adobe9阅读器渗透攻击——20145301

    Adobe9阅读器渗透攻击 实验步骤: 在kali终端中开启msfconsole,输入命令use exploit/windows/fileformat/adobe_cooltype_sing,进入该漏 ...

  3. 20165310 java_blog_week4

    2165310 <Java程序设计>第4周学习总结 教材学习内容总结 继承(extends) 同一个包内:继承除了private修饰的变量与方法 不同包内:不继承private和友好,继承 ...

  4. 打印图形|2014年蓝桥杯B组题解析第五题-fishers

    打印图形 小明在X星球的城堡中发现了如下图形和文字: rank=3 rank=5 rank = 6 小明开动脑筋,编写了如下的程序,实现该图形的打印. 答案:f(a, rank-1, row, col ...

  5. hdu 3415 Max Sum of Max-K-sub-sequence 单调队列优化DP

    题目链接: https://www.cnblogs.com/Draymonder/p/9536681.html 同上一篇文章,只是 需要记录最大值的开始和结束的位置 #include <iost ...

  6. BZOJ2724 [Violet]蒲公英 分块

    题目描述 经典区间众数题目 然而是权限题,所以题目链接放Luogu的 题解 因为太菜所以只会$O(n*\sqrt{n}+n*\sqrt{n}*log(n))$的做法 就是那种要用二分的,并不会clj那 ...

  7. json对象与javaBean，String字符创之间相互转换的方法

    原创:转载请注明出处 package com.allcam.system.utils; import com.fasterxml.jackson.databind.ObjectMapper; publ ...

  8. C# 窗口模拟点击按钮或关闭窗口

    public class CloseForm { [DllImport("user32", EntryPoint = "FindWindow")] privat ...

  9. 关于xargs cp中，如何确定拷贝的源和目的 （copied）

    Seker: find . -name "*" |xargs cp ???? 这里 xargs cp 怎么区分cp源 和 cp目的 例如:想把 查询到的文件 都copy到/home ...

  10. 非[无]root权限 服务器 下安装perl以及perl模块

    转载自http://www.zilhua.com 在本博客中,所有的软件安装都在服务器上,且无root权限.理论上适合所有的用户. 我的安装目录 cd /home/zilhua/software 1. ...