其实画了3个整圆圈+一个圆弧
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>填充纹理</title> </head> <style> </style> <body> <div id="canvas-warp"> <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;"> 你的浏览器居然不支持Canvas?!赶快换一个吧!! </canvas> </div> <script> window.onload = function () { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext("2d"); context.fillStyle = "#FFF"; context.fillRect(0, 0, 800, 600); // } context.beginPath(); context.arc(100,75,50,0,2*Math.PI); // context.closePath(); context.strokeStyle = "#aa3a5c"; context.fillStyle = "yellow"; context.fill(); //确认填充 context.stroke(); context.beginPath(); context.fillStyle="black"; context.arc(80,55,10,0,2*Math.PI); context.fill(); context.stroke(); context.beginPath(); context.fillStyle="black"; context.arc(120,55,10,0,2*Math.PI); context.fill(); context.stroke(); context.beginPath(); //context.fillStyle="green"; context.arc(100,65,40,0.15*Math.PI,0.85*Math.PI); // context.fill(); context.strokeStyle="black"; context.stroke(); } </script> </body> </html>