<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas太极</title>
<style type="text/css">
canvas{background:#A9A9A0;}
</style>
</head>
<body>
<canvas id="mycanvas" width="800" height="600">
您的浏览器暂不支持HTML5的canvas元素
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("mycanvas");
var c=canvas.getContext('2d');
c.strokeStyle="black";
g=c.createLinearGradient(400,100,400,500);
g.addColorStop(0,"white");
g.addColorStop(1,"black");
c.fillStyle=g;
c.arc(400,200,100,Math.PI*3/2,Math.PI/2,true);
c.arc(400,400,100,Math.PI*3/2,Math.PI/2);
c.arc(400,300,200,Math.PI/2,Math.PI*3/2);
c.fill();
c.beginPath();
g=c.createLinearGradient(400,100,400,500);
g.addColorStop(0,"black");
g.addColorStop(1,"white");
c.fillStyle=g;
c.arc(400,200,100,Math.PI*3/2,Math.PI/2,true);
c.arc(400,400,100,Math.PI*3/2,Math.PI/2);
c.arc(400,300,200,Math.PI/2,Math.PI*3/2,true);
c.fill();
c.beginPath();
g=c.createRadialGradient(400,200,0,400,200,10);
g.addColorStop(0,"black");
g.addColorStop(1,"white");
c.fillStyle=g;
c.arc(400,200,10,0,Math.PI*2);
c.fill();
c.beginPath();
g=c.createRadialGradient(400,400,0,400,400,10);
g.addColorStop(0,"white");
g.addColorStop(1,"black");
c.fillStyle=g;
c.arc(400,400,10,0,Math.PI*2);
c.fill();
</script>
</body>
</html>