<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>太极</title>
<script>
function draw(){
var canvas=document.getElementById('mycanvas');
var ctx=canvas.getContext('2d');
//大圆
ctx.beginPath();
ctx.strokeStyle="#000000";
ctx.lineWidth=1;
var color=ctx.createLinearGradient(500,300,500,700);
color.addColorStop(0,"#ffffff");//由白渐变到黑
color.addColorStop(1,"#000000");
ctx.fillStyle=color;
ctx.arc(500,500,200,Math.PI*0.5,Math.PI*1.5,false);
ctx.stroke();
ctx.fill();
ctx.closePath();
ctx.beginPath();
var color=ctx.createLinearGradient(500,300,500,700);//a（a和b只需要一个改变就可以）
color.addColorStop(0,"#000000");//b
color.addColorStop(1,"#ffffff");//由黑渐变到白
ctx.fillStyle=color;
ctx.arc(500,500,200,Math.PI*1.5,Math.PI*0.5,false);
ctx.stroke();
ctx.fill();
ctx.closePath();
//中半圆
ctx.beginPath();
var color=ctx.createLinearGradient(500,300,500,700);
color.addColorStop(0,"#000000");//由黑渐变到白
color.addColorStop(1,"#ffffff");
ctx.fillStyle=color;
ctx.arc(500,400,100,Math.PI*0.5,Math.PI*1.5,false);
ctx.stroke();
ctx.fill();
ctx.closePath();
ctx.beginPath();
var color=ctx.createLinearGradient(500,300,500,700);
color.addColorStop(0,"#ffffff");//由白渐变到黑
color.addColorStop(1,"#000000");
ctx.fillStyle=color;
ctx.arc(500,600,100,Math.PI*1.5,Math.PI*0.5,false);
ctx.stroke();
ctx.fill();
ctx.closePath();
//小圆
ctx.beginPath();
var radgrad=ctx.createRadialGradient(450,400,1,450,400,30);
radgrad.addColorStop(0,"#ffffff");
radgrad.addColorStop(1,"#000000");//黑色
ctx.fillStyle=radgrad;
ctx.arc(450,400,20,0,Math.PI*2,false);
ctx.stroke();
ctx.fill();
ctx.closePath();
ctx.beginPath();
var radgrad=ctx.createRadialGradient(550,600,1,550,600,30);
radgrad.addColorStop(0,"#000000");//黑色
radgrad.addColorStop(1,"#ffffff");
ctx.fillStyle=radgrad;
ctx.arc(550,600,20,0,Math.PI*2,false);
ctx.stroke();
ctx.fill();
ctx.closePath();
}
</script>
</head>
<body onLoad="draw()">
<canvas id="mycanvas" width="1000" height="1000">
</canvas>
</body>
</html>
运行结果：
