绘制扇形，空心文字，实心文字，颜色线性 放射性渐变

//绘制扇形
context.lineWidth=1;
context.fillStyle="orange";
context.moveTo(100,100);
context.arc(100,100,60,Math.PI*7/6,Math.PI*1.5,false);
context.fill();
context.beginPath();
context.moveTo(100,100);
context.arc(100,100,60,Math.PI*11/6,Math.PI*1.5,true);
context.fill();

context.beginPath();
context.fillStyle="#999";
context.moveTo(100,100);
context.arc(100,100,30,Math.PI*7/6,Math.PI*1.5,false);
context.fill();
context.beginPath();
context.moveTo(100,100);
context.arc(100,100,30,Math.PI*11/6,Math.PI*1.5,true);
context.fill();


//绘制空心 实心文

context.lineWidth=1;
context.strokeStyle="yellow";
context.fillStyle="red";
font="20px 隶书";
context.strokeText("欢迎来到闹闹猪的博客",50,10);
context.fillText("欢迎来到闹闹猪的博客",50,30);

context.strokeText("欢迎来到闹闹猪的博客",50,50);
context.fillText("欢迎来到闹闹猪的博客",50,50);

//颜色线性渐变
g=context.createLinearGradient(50,50,50,100);//从上到下的填充
g.addColorStop(0,"pink");
g.addColorStop(0.5,"purple");
g.addColorStop(1,"white");
context.fillStyle=g;
context.fillRect(50,50,100,50);
context.fill();

 

//颜色放射性渐变
g=context.createRadialGradient(50,50,50,50,50,80);//从上到下的填充
g.addColorStop(0,"pink");
g.addColorStop(0.5,"purple");
g.addColorStop(1,"white");
context.fillStyle=g;
context.arc(50,50,80,0,Math.PI*2);
context.fill();