canvas渐变

Posted 2020-06-10

代码：

 1 /**
 2  * Created by Administrator on 2016/1/29.
 3  */
 4 function draw(id){
 5     var canvas = document.getElementById(id);
 6     var context = canvas.getContext("2d");
 7 //    var grd = context.createLinearGradient(0,0,300,0);
 8     var grd = context.createRadialGradient(50,50,0,100,100,90);
 9     grd.addColorStop(0,"#ff0000");
10     grd.addColorStop(0.5,"#ff6100");
11     grd.addColorStop(1,"#0000ff");
12     context.fillStyle = grd;
13     context.fillRect(0,0,300,300);
14 }

View Code

用到的方法createLinearGradient()，createRadialGradient(),addColorStop()。

　　1) createLinearGradient()绘制线性渐变。

　　线性渐变：在起始点和结束点之间插入颜色值。

　　　　　　格式：createLinearGradient(xStart,yStart,xEnd,yEnd):一个起始坐标点，一个结束坐标点。

　　2) createRadialGradient()绘制径向渐变。

　　径向渐变：在两个圆的圆周之间放射性地插入颜色值。

　　　　　　格式：createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd):一个起始点及其半径，一个结束点及其半径。

　　3) addColorStop()为渐变添加颜色。　

addColorStop(offset,color)：offset表示渐变的改变点在哪，范围为0~1。color是颜色值。