Canvas之4渐变

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

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