大圆+小圆
一个半圆+一个小圆
<!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.beginPath(); context.arc(100,75,50,1*Math.PI,2*Math.PI); context.strokeStyle = "#aa3a5c"; context.fillStyle = "yellow"; context.fill(); //确认填充 context.stroke(); context.beginPath(); context.fillStyle="navy"; context.arc(100,75,10,0,2*Math.PI); context.fill(); context.stroke(); } </script> </body> </html>