1.利用canvas画一个太极图

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>太极图</title>
</head>
<body>
    <canvas id="myCanvas" width="1300px" height="600px" style="background:gray">
        你的浏览器不支持canvas
    </canvas>
    <script type="text/javascript">
        var canvas=document.getElementById('myCanvas');
        var context=canvas.getContext('2d');

        // 太极图
        context.lineWidth=5;
        context.fillStyle="black";
        context.arc(400,300,200,Math.PI/2,Math.PI/2*3,false);
        context.fill();

        context.beginPath();
        context.fillStyle="white";
        context.arc(400,300,200,Math.PI/2*3,Math.PI/2,false);
        context.fill();

        context.beginPath();
        context.fillStyle="black";
        context.arc(400,200,100,Math.PI/2*3,Math.PI/2,false);
        context.fill();

        context.beginPath();
        context.fillStyle="white";
        context.arc(400,400,100,Math.PI/2,Math.PI/2*3,false);
        context.fill();

        // 两个小圆心
        context.beginPath();
        context.fillStyle="white";
        context.arc(400,200,10,0,Math.PI*2,false);
        context.fill();

        context.beginPath();
        context.fillStyle="black";
        context.arc(400,400,10,0,Math.PI*2,false);
        context.fill();

    </script>
</body>
</html>