<!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. Linux解压文件到指定目录

    Linux解压文件到指定目录 tar在Linux上是常用的打包.压缩.加压缩工具,他的参数很多,折里仅仅列举常用的压缩与解压缩参数 参数:-c :create 建立压缩档案的参数:-x : 解压缩压缩 ...

  2. Python 自学基础（四）——time模块，random模块，sys模块，os模块，loggin模块，json模块，hashlib模块，configparser模块，pickle模块，正则

    时间模块 import time print(time.time()) # 当前时间戳 # time.sleep(1) # 时间延迟1秒 print(time.clock()) # CPU执行时间 p ...

  3. 20145307陈俊达_安卓逆向分析_APKtools分析smail

    20145307陈俊达_安卓逆向分析_APKtools分析smail 引言 真刺激呢!到了第二篇博客了,难度开始加大,之前是简单的dex2jar和有图形界面的jd-gui,现在来隆重介绍强大的反汇编工 ...

  4. 20145307陈俊达《网络对抗》Exp5 MSF基础应用

    20145307陈俊达<网络对抗>Exp5 MSF基础应用 基础问题回答 用自己的话解释什么是exploit,payload,encode? exploit就相当于是载具,各式各样的漏洞在 ...

  5. visual studio扩展插件Visual Assist x给代码插入注释模板(转载)

    转载:http://www.cnblogs.com/xiongmao-cpp/p/5196555.html Visual Assist 是由Whole Tomato公司为Microsoft Visua ...

  6. Python3基础 set 自动将重复合并掉 不支持索引

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  7. [Pytorch]深度模型的显存计算以及优化

    原文链接:https://oldpan.me/archives/how-to-calculate-gpu-memory 前言 亲,显存炸了,你的显卡快冒烟了! torch.FatalError: cu ...

  8. C# 代码设置DataGrid列属性

    1 DataGridTableStyle dts = new DataGridTableStyle(); 2 dataGrid1.TableStyles.Clear(); 3 dts.MappingN ...

  9. 【Python】【问题集锦】

    1. 用pycharm安装第三方包失败,报类似于“sort"的错误,就转战终端 2. Mac终端安装第三包失败,报类似于“ PermissionError: [Errno 13] Permi ...

  10. BZOJ 2339 【HNOI2011】 卡农

    题目链接:卡农 听说这道题是经典题? 首先明确一下题意(我在这里纠结了好久):有\(n\)个数,要求你选出\(m\)个不同的子集,使得每个数都出现了偶数次.无先后顺序. 这道题就是一道数学题.显然我们 ...