标签：
最近刚学习canvas，自己做了一个太极图。
<!DOCTYPE html> <html> <head> <title>绘制圆形练习</title> <meta charset="utf-8" /> </head> <body> <canvas id="canvas" width="500px" height="300px"></canvas> <script> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); context.translate(canvas.width/2,canvas.height/2); setInterval(function(){ context.clearRect(0,0,500,300); context.rotate(Math.PI/180*10); // 1. 绘制空心圆形 context.beginPath(); context.arc(0,0,100,0,Math.PI*2); context.closePath(); context.stroke(); // 2. 绘制实心半圆 context.beginPath(); context.arc(0,0,100,Math.PI/2,Math.PI*3/2); context.closePath(); context.fill(); // 3. 绘制黑色圆形 context.beginPath(); context.arc(0,50,50,0,Math.PI*2); context.closePath(); context.fill(); // 4. 绘制白色圆形 context.fillStyle = "white"; context.beginPath(); context.arc(0,-50,50,0,Math.PI*2); context.closePath(); context.fill(); // 5. 绘制一黑一白小圆形 context.beginPath(); context.arc(0,50,20,0,Math.PI*2); context.closePath(); context.fill(); context.fillStyle = "black"; context.beginPath(); context.arc(0,-50,20,0,Math.PI*2); context.closePath(); context.fill(); },100); </script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/lzz-fight/p/5114035.html
