渐变方案

1. 线性渐变
   
2.            var grd=ctx.createLinearGradient(x0,y0,x1,y1);
   
3.                      x0-->渐变开始的x坐标
   
4.           y0-->渐变开始的y坐标
   
5.           x1-->渐变结束的x坐标
   
6.           y1-->渐变结束的y坐标
   
7.          
   
8.       grd.addColorStop(0,"black");      设置渐变的开始颜色
   
9.       grd.addColorStop(0.1,"yellow");   设置渐变的中间颜色
   
10.       grd.addColorStop(1,"red");        设置渐变的结束颜色
    
11. 
    
12.             ctx.strokeStyle=grd;
    
13.       ctx.stroke();
    
14.       
    
15.       备注：
    
16.          addColorStop(offse,color);
    
17.          中渐变的开始位置和结束位置介于0-1之间，0代表开始，1代表结束。中间可以设置任何小数
    
18.          
    
19.   ☞ 径向渐变
    
20.   
    
21.                   ctx.createradialGradient(x0,y0,r0,x1,y1,r1);
    
22. 
    
23.             (x0,y0)：渐变的开始圆的 x,y 坐标
    
24. 
    
25.             r0：开始圆的半径
    
26. 
    
27.             (x1,y1)：渐变的结束圆的 x,y 坐标
    
28. 
    
29.             r1：结束圆的半径
    
30. 
    

复制代码