Canvas之4渐变

• 1.线性渐变
• var CLG=cvs.createLinearGradient(x0,y0,x1,y1);
  • x0:渐变开始的x坐标
  • y0:渐变开始的y坐标
  • x1:渐变结束的x坐标
  • y1:渐变结束的y坐标
• CLG.addColorStop(n,m);
  • n:设置颜色的偏移量
  • m:颜色

• 例如:

  function draw1(){
  	var CLG=cvs.createLinearGradient(0,0,200,200);
  	//创建一个线性渐变 渐变开始的坐标0,0 渐变结束的坐标200,200 (即从左上角到右下角渐变)
  	CLG.addColorStop(0,'red');//设置渐变的偏移量0% 颜色红色
  	CLG.addColorStop(0.25,'yellow');//设置渐变的偏移量25% 颜色黄色
  	CLG.addColorStop(0.5,'skyblue');//设置渐变的偏移量50% 颜色天空蓝
  	CLG.addColorStop(0.75,'orange');//设置渐变的偏移量75% 颜色橘黄
  	CLG.addColorStop(1,'pink');//设置渐变的偏移量100% 颜色粉色
  	cvs.fillStyle=CLG;//设置填充样式是线性渐变
  	cvs.fillRect(0,0,200,200);//设置填充矩形 左上角坐标0,0  宽200px  高200px
  	cvs.fill();//设置样式为填充样式
  }
  draw1();

• 2.径向渐变(发散性渐变)

• cvs.createRadialGradient(x0,y0,x1,y1,r1);
  • x0:发散渐变开始中心的x坐标
  • y0：发散渐变开始中心的y坐标
  • r0:发散渐变开始的半径
  • x1:发散渐变结束中心的x坐标
  • y1：发散渐变结束中心的y坐标
  • r1:发散渐变结束的半径
• 例如:

  function draw2(){
  	var CRG=cvs.createRadialGradient(200,200,200,200,200,10);
  	//创建一个径向/发散性渐变 渐变开始的坐标200,200 渐变开始的半径200px 渐变结束的坐标200,200 渐变结束的半径10px
  	CRG.addColorStop(0,'purple');
  	CRG.addColorStop(0.2,'yellow');
  	CRG.addColorStop(0.4,'pink');
  	CRG.addColorStop(0.6,'lightblue');
  	CRG.addColorStop(0.8,'skyblue');
  	CRG.addColorStop(1,'white');
  	cvs.fillStyle=CRG;//设置填充样式是径向渐变
  	cvs.fillRect(100,100,200,200);
  	//设置填充矩形 左上角坐标100,100  宽200px  高200px
  }
  draw2();