//绘制扇形
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();