<!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>