Achieve results is as follows:
Codes are as follows:
<!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'); left big black semicircle// mt.beginPath (); mt.arc ( 300 , 300 , 200 is , 90 * Math.PI / as 180, 270 * Math.PI / 180 [ , to false ); mt.fillStyle = ' # 000 ' ; mt.fill (); // large white on the right semicircle mt.beginPath (); mt.arc ( 300 , 300 , 200 is , 270 * Math.PI / 180,90 * Math.PI / 180 [ , to false ); mt.fillStyle= ' #Fff ' ; mt.fill (); // left as a white semi-circular mt.beginPath (); mt.arc ( 300 , 200 is , 100 , 90 * Math.PI / as 180, 270 * Math.PI / 180 [ , to false ) ; mt.fillStyle = ' #fff ' ; mt.fill (); // the right semi-circular black mt.beginPath (); mt.arc ( 300 , 400 , 100 , 270* Math.PI / 180,90 * Math.PI / 180 [ , to false ); mt.fillStyle = ' # 000 ' ; mt.fill (); // left small round black mt.beginPath (); mt.arc ( 300 , 200 is , 50 , 0 * Math.PI / 180,360 * Math.PI / 180 [ , to false ); mt.fillStyle = ' # 000 ' ; mt.fill (); // the right round white mt.beginPath (); mt.arc (300,400,50,0*Math.PI/180,360*Math.PI/180,false); mt.fillStyle='#fff'; mt.fill(); </script> </body> </html>