画圆及填充文字
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> canvas{ background: #ccc; } </style> </head> <body> <canvas id="canvas" width="600" height="600"></canvas> </body> <script type="text/javascript"> var canvas=document.getElementById('canvas'); var ctx=canvas.getContext('2d'); ctx.strokeStyle='#fff'; ctx.beginPath(); ctx.arc(300,300,50,0,2*Math.PI); // ctx.closePath(); // ctx.fillStyle='grey'; // ctx.fill(); ctx.stroke(); // ctx.beginPath(); ctx.strokeStyle='green'; ctx.arc(300,300,50,0.5*Math.PI,1.5*Math.PI); ctx.stroke(); // ctx.closePath(); ctx.font='bold 19px arial' ctx.fillStyle='red'; ctx.fillText('50%',285,310) </script> </html>
