zoukankan      html  css  js  c++  java
  • 使用路径arc-奥运五环

    <!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-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>

  • 相关阅读:
    BOI 2002 双调路径
    BOI'98 DAY 2 TASK 1 CONFERENCE CALL Dijkstra/Dijkstra+priority_queue/SPFA
    USACO 2013 November Contest, Silver Problem 2. Crowded Cows 单调队列
    BOI 2003 Problem. Spaceship
    USACO 2006 November Contest Problem. Road Blocks SPFA
    CEOI 2004 Trial session Problem. Journey DFS
    USACO 2015 January Contest, Silver Problem 2. Cow Routing Dijkstra
    LG P1233 木棍加工 动态规划,Dilworth
    LG P1020 导弹拦截 Dilworth
    USACO 2007 February Contest, Silver Problem 3. Silver Cow Party SPFA
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/3171610.html
Copyright © 2011-2022 走看看