实现效果如下：
实现代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>太极八卦图</title> <style type="text/css"> div{ text-align: center; margin-top: 30px; } #mytj{ background-color: skyblue; } </style> </head> <body> <div> <canvas width="600px" height="600px" id="mytj"></canvas> </div> <script type="text/javascript"> var mytj = document.getElementById('mytj'); var mt = mytj.getContext('2d'); //左边黑色大半圆 mt.beginPath(); mt.arc(300,300,200,90*Math.PI/180,270*Math.PI/180,false); mt.fillStyle='#000'; mt.fill(); //右边白色大半圆 mt.beginPath(); mt.arc(300,300,200,270*Math.PI/180,90*Math.PI/180,false); mt.fillStyle='#fff'; mt.fill(); //左边白色中半圆 mt.beginPath(); mt.arc(300,200,100,90*Math.PI/180,270*Math.PI/180,false); mt.fillStyle='#fff'; mt.fill(); //右边黑色中半圆 mt.beginPath(); mt.arc(300,400,100,270*Math.PI/180,90*Math.PI/180,false); mt.fillStyle='#000'; mt.fill(); //左边黑色小圆 mt.beginPath(); mt.arc(300,200,50,0*Math.PI/180,360*Math.PI/180,false); mt.fillStyle='#000'; mt.fill(); //右边白色小圆 mt.beginPath(); mt.arc(300,400,50,0*Math.PI/180,360*Math.PI/180,false); mt.fillStyle='#fff'; mt.fill(); </script> </body> </html>