<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>太极图</title> </head> <body> <canvas id="canvas" width="800px" height="800px"></canvas>//创建一个画布 <script type="text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //先画一个大圆 context.beginPath(); context.arc(200,200,200,0,2*Math.PI,false); context.closePath(); context.stroke() //画左半边的半圆（从0.5*Math.PI-1.5*Math.PI），颜色填充为黑色 context.beginPath(); context.arc(200,200,200,0.5*Math.PI,1.5*Math.PI,false); context.closePath(); context.fillStyle = "#000"; context.fill() //画左半边上面的半圆（从0-1.5*Math.PI）,颜色填充为白色 context.beginPath(); context.arc(200,100,100,0,1.5*Math.PI,false); context.closePath(); context.fillStyle = "#fff"; context.fill() //画右半边下面的半圆（从0.5*Math.PI-1.5*Math.PI），颜色填充为黑色 context.beginPath(); context.arc(200,300,100,0.5*Math.PI,1.5*Math.PI,true); context.closePath(); context.fillStyle = "#000"; context.fill() //在上面的半圆内画一个比半圆小的整圆，颜色填充为黑色 context.beginPath(); context.arc(200,100,50,0,2*Math.PI,false); context.closePath(); context.fillStyle = "#000"; context.fill() //在下面的半圆内画一个比半圆小的整圆，颜色填充为白色 context.beginPath(); context.arc(200,300,50,0,2*Math.PI,false); context.closePath(); context.fillStyle = "#fff"; context.fill() </script> </body> </html>
