canvas绘制奥运五环代码分享

!DOCTYPE htML>
    html>
    head>
    /head>
    body>
    canvas id="drawing" width="800" height="600">
    A drawing of someing!/canvas>
        script type="text/javascript">
    VAR drawing = document.getElementById('drawing');
if(drawing.getContext) {
    //绘制奥运五环，画圆var context = drawing.getContext('2d');
                context.lineWidth = 7;
                context.strokeStyle = '#0180C3';
                context.beginPath();
                context.arc(70, 70, 40, 0, 2*Math.PI, false);
                context.stroke();
                context.strokeStyle = '#000';
                context.beginPath();
                context.arc(160, 70, 40, 0, 2*Math.PI, false);
                context.stroke();
                context.strokeStyle = '#BF0628';
                context.beginPath();
                context.arc(250, 70, 40, 0, 2*Math.PI, false);
                context.stroke();
                context.strokeStyle = '#EBC41F';
                context.beginPath();
                context.arc(115, 110, 40, 0, 2*Math.PI, false);
                context.stroke();
                context.strokeStyle = '#198E4A';
                context.beginPath();
                context.arc(205, 110, 40, 0, 2*Math.PI, false);
                context.stroke();
    //环环相扣，画弧（实现相关圆弧的覆盖）context.strokeStyle = '#0180C3';
                context.beginPath();
                context.arc(70, 70, 40, 1.9*Math.PI, 2.1*Math.PI, false);
                context.stroke();
                context.strokeStyle = '#000';
                context.beginPath();
                context.arc(160, 70, 40, 1.9*Math.PI, 2.1*Math.PI, false);
                context.stroke();
                context.beginPath();
                context.arc(160, 70, 40, 0.5*Math.PI, 0.7*Math.PI, false);
                context.stroke();
                context.strokeStyle = '#BF0628';
                context.beginPath();
                context.arc(250, 70, 40, 0.5*Math.PI, 0.7*Math.PI, false);
                context.stroke();
        }
    /script>
    /body>
    /html>
    

以上就是 canvas绘制奥运五环代码分享的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！