用 canvas 制造奥运五环

2019年9月1日 144次阅读 来源: 啊衰

《用 canvas 制造奥运五环》
<canvas id=”xxb” width=”500″ height=”500″></canvas>

    <script type="text/javascript">
        var bg = document.getElementById('xxb');
        var ctx = bg.getContext('2d');
        //第一个圆圈
        ctx.beginPath();
        ctx.lineWidth=10;   //圆圈的边线的大小
        ctx.strokeStyle='RGB(43,0,155)';  //圆圈的色彩
        ctx.arc(60,60,50,0*Math.PI,2.25*Math.PI,false);  // 圆圈的 程度位置 、 垂直位置 、 圆圈的半径、圆圈的弧度 ，
        ctx.stroke();
        
         //第二个圆圈
         ctx.beginPath();
        ctx.lineWidth=10;
        ctx.strokeStyle='RGB(35,24,22)';
        ctx.arc(180,60,50,0*Math.PI,2*Math.PI,false);
        ctx.stroke();
         //第三个圆圈
         ctx.beginPath();
        ctx.lineWidth=10;
        ctx.strokeStyle='RGB(248,3,0)';
        ctx.arc(300,60,50,0*Math.PI,2*Math.PI,false);
        ctx.stroke();
        //第四个圆圈
         ctx.beginPath();
        ctx.lineWidth=10;
        ctx.strokeStyle='RGB(223,252,22)';
        ctx.arc(120,100,50,0*Math.PI,2*Math.PI,false);
        ctx.stroke();
        
        //第五个圆圈
         ctx.beginPath();
        ctx.lineWidth=10;
        ctx.strokeStyle='RGB(37,254,75)';
        ctx.arc(240,100,50,0*Math.PI,2*Math.PI,false);
        ctx.stroke();
    </script>
    原文作者：啊衰
    原文地址: https://segmentfault.com/a/1190000019289960
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞