HTML5 画出奥运五环效果

html部分canvas代码：

<canvas height="200" id="myCanvas" width="400"> Your browser does not support the canvas element. </canvas>

JS部分代码：

 
        var c = document.getElementById("myCanvas");
        var ctx = c.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();

        //php族:交叉部分渲染
        ctx.strokeStyle = "#163B62";
        ctx.beginPath();
        ctx.arc(70, 70, 40, Math.PI * 1.9, Math.PI * 2.1, false);
        ctx.stroke(); 
    
        ctx.strokeStyle = "#000000";
        ctx.beginPath();
        ctx.arc(160, 70, 40, Math.PI * 0.9, Math.PI * 2.1, false);
        ctx.stroke();
   
        ctx.strokeStyle = "#BF0628";
        ctx.beginPath();
        ctx.arc(250, 70, 40, Math.PI * 0.9, Math.PI * 1.1, false);
        ctx.stroke();
 

欢迎转载，转载请保留链接: https://www.phpzu.com/article/2014/08/23/552.html