實現效果如下：
實現代碼如下：
<!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>