HTML5 画出奥运五环效果

2014-08-23 23:33 | 发布者 : hanjiansky | 评论 : 0| 查看 : 26 来源 : 互联网

摘要: html部分canvas代码: <canvas height="200" id="myCanvas" width="400"> Your browser does not support the canvas element. </can...

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();
 

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

HTML5 画出奥运五环效果:等您坐沙发呢!

发表评论

0