代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #a1{ border: 1px solid red; background-color: lightgray; } </style> </head> <body> <canvas id="a1" width="600" height="600"></canvas> <script type="text/javascript"> var a1=document.getElementById('a1'); var canvas=a1.getContext('2d'); canvas.strokeStyle='red'; canvas.beginPath(); canvas.arc(200,200,200,90*Math.PI/180,-90*Math.PI/180,true) canvas.fillStyle='#000'; canvas.fill(); canvas.beginPath(); canvas.arc(200,200,200,90*Math.PI/180,-90*Math.PI/180,false) canvas.fillStyle='#fff'; canvas.fill(); canvas.beginPath(); canvas.arc(200,100,100,90*Math.PI/180,-90*Math.PI/180,false) canvas.fillStyle='#000'; canvas.fill(); canvas.beginPath(); canvas.arc(200,300,100,90*Math.PI/180,-90*Math.PI/180,true) canvas.fillStyle='#fff'; canvas.fill(); canvas.beginPath(); canvas.arc(200,100,30,0*Math.PI/180,360*Math.PI/180) canvas.fillStyle='#fff'; canvas.fill(); canvas.beginPath(); canvas.arc(200,300,30,0*Math.PI/180,360*Math.PI/180,true) canvas.fillStyle='#000'; canvas.fill(); </script> </body> </html>