<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="canvas" style="border: 1px #ddd solid;display: block;margin:0 auto"></canvas> <script> window.onload = function(){ var canvas = document.getElementById('canvas'); canvas.width = 1024; canvas.height = 768; if(canvas.getContext('2d')){ var context = canvas.getContext('2d'); context.lineWidth = 5; context.strokeStyle = "#005588"; for(var i=0;i<10;i++){ context.beginPath(); context.arc(50+i*100,50,40,0,2*Math.PI*(i+1)/10,false); context.closePath(); context.stroke() } for(var i=0;i<10;i++){ context.beginPath(); context.arc(50+i*100,200,40,0,2*Math.PI*(i+1)/10,false); // context.closePath(); context.stroke() } for(var i=0;i<10;i++){ context.beginPath(); context.arc(50+i*100,350,40,0,2*Math.PI*(i+1)/10,false); context.closePath(); context.stroke(); context.fillStyle ="#005588" context.fill(); } }else{ alert('当前游览器不支持Canvas，请更换游览器后再试！'); } } </script> </body> <script> /* 总结 context.arc( （圆心x 圆心y 半径r） centerx,centery,radius, （起始角度，终止角度） startingAngle,endingAngle, (false 顺时针绘制) anticlockwise = false ) */ </script> </html>