HTML5绘制奥运五环

Alan

10 年前

奥运五环是奥运会的标志，由Pierre de Coubertin顾拜旦先生于1913年所构思设计的，下面通过HTML5的canvas加js来绘制五环标志。部分代码如下：
创建Canvas:

     <canvas id="#" width="#" height="#" style="border: 1px solid #c3c3c3;"></canvas>

1	<canvas id="#" width="#" height="#" style="border: 1px solid #c3c3c3;"></canvas>

通过javascript设置画布环境并绘制圆形：

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

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不支持，所以将无法正常显示，图形效果如下：