带细条纹的html5画布填充圆形

<canvas id="myCanvas"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var radius = 50;

ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
ctx.closePath();

var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, "white");
gradient.addColorStop(0.5, "gray");
gradient.addColorStop(1, "white");

ctx.fillStyle = gradient;

ctx.fill();