html八卦绘制,通过HTML5标签canvas绘制一个八卦图案

只需要用到casvas标签和fillStyle、arc、beginPath、closePath、fill方法

代码如下：

var id=document.getElementById("rect");

var context= id.getContext("2d");

context.fillStyle="#AAAAAA";

context.fillRect(0,0,310,310);

context.fillStyle="#FFFFFF";

context.beginPath();

context.arc(155,155,150,Math.PI/2,Math.PI*3/2,true);

context.closePath();

context.fill();

context.fillStyle="#000000";

context.beginPath();

context.arc(155,155,150,Math.PI/2,Math.PI*3/2,false);

context.closePath();

context.fill();

context.beginPath();

context.arc(155,230,75,Math.PI/2,Math.PI*3/2,true);

context.closePath();

context.fill();

context.fillStyle="#FFFFFF";

context.beginPath();

context.arc(155,80,75,Math.PI/2,Math.PI*3/2,false);

context.closePath();

context.fill();

context.beginPath();

context.arc(155,230,15,0,Math.PI*2,false);

context.closePath();

context.fill();

context.fillStyle="#000000";

context.beginPath();

context.arc(155,80,15,0,Math.PI*2,false);

context.closePath();

context.fill();

原文：http://www.cnblogs.com/stormysky/p/3916334.html