<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas太极</title> <style type="text/css"> canvas{background:#A9A9A0;} </style> </head> <body> <canvas id="mycanvas" width="800" height="600"> 您的浏览器暂不支持HTML5的canvas元素 </canvas> <script type="text/javascript"> var canvas=document.getElementById("mycanvas"); var c=canvas.getContext('2d'); c.strokeStyle="black"; g=c.createLinearGradient(400,100,400,500); g.addColorStop(0,"white"); g.addColorStop(1,"black"); c.fillStyle=g; c.arc(400,200,100,Math.PI*3/2,Math.PI/2,true); c.arc(400,400,100,Math.PI*3/2,Math.PI/2); c.arc(400,300,200,Math.PI/2,Math.PI*3/2); c.fill(); c.beginPath(); g=c.createLinearGradient(400,100,400,500); g.addColorStop(0,"black"); g.addColorStop(1,"white"); c.fillStyle=g; c.arc(400,200,100,Math.PI*3/2,Math.PI/2,true); c.arc(400,400,100,Math.PI*3/2,Math.PI/2); c.arc(400,300,200,Math.PI/2,Math.PI*3/2,true); c.fill(); c.beginPath(); g=c.createRadialGradient(400,200,0,400,200,10); g.addColorStop(0,"black"); g.addColorStop(1,"white"); c.fillStyle=g; c.arc(400,200,10,0,Math.PI*2); c.fill(); c.beginPath(); g=c.createRadialGradient(400,400,0,400,400,10); g.addColorStop(0,"white"); g.addColorStop(1,"black"); c.fillStyle=g; c.arc(400,400,10,0,Math.PI*2); c.fill(); </script> </body> </html>