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>

  • 相关阅读:
    Linux命令-read
    pytest8-skip与xfail
    python模块-contextlib
    python中eval的使用
    python学习-面向对象(六)
    java学习-IDEA运行java程序报错
    nginx 使用SSL证书 代理https
    BC30560: “ExtensionAttribute”在命名空间“System.Runtime.CompilerServices”中不明确。
    nginx 代理相对路径使用不起
    nginx 解决不同web服务器 在同一服务器使用80端口问题
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/3171610.html
Copyright © 2011-2022 走看看