奥运五环是奥运会的标志，由Pierre de Coubertin顾拜旦先生于1913年所构思设计的，下面通过HTML5的canvas加js来绘制五环标志。部分代码如下：
创建Canvas:
|
1 |
<canvas id="#" width="#" height="#" style="border: 1px solid #c3c3c3;"></canvas> |
通过javascript设置画布环境并绘制圆形：
|
1 2 3 4 5 6 7 |
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); //context.arc(x,y,r,sAngle,eAngle,counterclockwise) ctx.stroke(); |
由于IE9以前的版本及其它浏览器早期的版本对canvas不支持，所以将无法正常显示，图形效果如下：
