<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="canvas" style="border:1px solid #ccc;display:block;"> 当前浏览器不支持canvas，请更换浏览器后在试。 </canvas> <script> window.onload = function () { var canvas = document.getElementById(‘canvas‘); var context = canvas.getContext(‘2d‘); canvas.width = 1200; canvas.height = 800; context.lineWidth = 5; context.strokeStyle = ‘black‘; for (var i = 0; i < 10; i++) { context.beginPath(); context.arc(50 + i * 100, 60, 40, 0 , 0.2 * (i + 1) * Math.PI); // context.arc(圆心x轴坐标,圆心y轴坐标,半径,起始点,终点,[顺时针/逆时针，true为逆时针，默认为false]); context.closePath(); context.stroke(); }; for (var i = 0; i < 10; i++) { context.beginPath(); context.arc(50 + i * 100, 200, 40, 0 , 0.2 * (i + 1) * Math.PI); context.stroke(); }; for (var i = 0; i < 10; i++) { context.beginPath(); context.arc(50 + i * 100, 400, 40, 0 , 0.2 * (i + 1) * Math.PI, true); context.closePath(); context.stroke(); }; context.fillStyle = ‘orange‘; for (var i = 0; i < 10; i++) { context.beginPath(); context.arc(50 + i * 100, 600, 40, 0 , 0.2 * (i + 1) * Math.PI, true); context.stroke(); context.fill(); }; } </script> </body> </html>
原文：http://www.cnblogs.com/lxcong/p/4844633.html