Javascript高级编程学习笔记（92）—— Canvas(9) 渐变

渐变

渐变由 canvasGradient 实例表示

要创建一个渐变对象需要调用 createLinearGradient() 方法

该方法接收四个参数:

1. 起点的x坐标
2. 起点的y坐标
3. 终点的x坐标
4. 终点的y坐标

调用该方法后会创建一个指定大小的实例,并返回一个 CanvasGradient 实例

创建渐变对象后需要指定色标,通过 addColorStop()

该方法接收两个参数:

• 色标位置 
• CSS颜色值

如:

var gradient = context.createLinearGradient(30,30,70,70);

gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");

渐变对象创建完成后就可以将渐变对象赋值给 fillStyle strokeStyle 来通过渐变绘制图像

// 绘制渐变矩形
context.fillStyle = gradient;
context.fillRect(30,30,50,50);

而如果需要使用径向渐变,则需要使用 createRadialGradient() 方法

该方法接收6个参数:

1. 起点圆的圆心x坐标
2. 起点圆的圆心y坐标
3. 起点圆的圆半径
4. 终点圆的圆心x坐标
5. 终点圆的圆心y坐标
6. 终点圆的圆半径

var gradient = context.createRadialGradient(30,30.10,30,30,20);

gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");

context.fillStyle = gradient;
context.fillRect(30,30,50,50);