html5 canvas中CanvasGradient对象用法

html5 中canvas提供了强大的渲染样式,可以实现一些比较复杂的样式设置,今天学习了CanvasGradient对象可以实现一个颜色的渐变

CanvasGradient对象可以实现两种不同形式的颜色渐变,

1. 线性颜色渐变(从一端到一端的颜色渐变)
2. 放射性颜色渐变(从一个点或一个圆向外进行辐射性的颜色渐变)

一.首先要创建一个CanvasGradient对象(两种)

1.创建一个作用于canvas指定区域的线性颜色渐变CanvasGradient对像:

createLinearGradient(xStart, yStart, xEnd, yEnd)

参数说明:startX,startY左上角坐标,endX,endY右下角坐标-à形成一个矩形区域

2.创建一个作用于canvas指定区域的线性颜色渐变CanvasGradient对像:

createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

参数说明: (xStart, yStart)第一个圆的圆心, radiusStart第一个圆半径,( xEnd, yEnd)第二个圆的圆心坐标, radiusEnd第二个圆的半径,

其作用区域就是第一个圆到第二个圆之间的环状区域

二.实现颜色渐变效果

通过以上的方法创建会返回了一个新的 CanvasGradient 对象,此新对象具备属性或方法是addColorStop(offset, color),

参数: 是一个范围在0.0到1.0之间的浮点值。对于CanvasGradient对象而言，它将整个作用区域看成是一个从0到1的过度，0表示起始点,1表示结束点.

color表示要填充的颜色.

 ps:可以一次或者多次调用addColorStop()方法向作用区域中添加指定颜色的渐变点。在绘制成图像时，它就会实现从上一个渐变点的颜色到下一个渐变点的颜色进行过渡的渐变效果。

1.实现线性颜色渐变

//前面已创建一个矩形fillRect(50,50,250,50)
//创建一个表示线性颜色渐变的CanvasGradient对象，并设置该对象的作用区域就是线段所在的区域

    var canvasGradient = ctx.createLinearGradient(50, 50, 250, 50);

    //在offset为0的位置(即起点位置)添加一个蓝色的渐变

    canvasGradient.addColorStop(0, "blue");

    //在offset为0.2的位置(线段左起20%的位置)添加一个绿色的渐变

    canvasGradient.addColorStop(0.2, "green");

    //在offset为0的位置(即终点位置)添加一个红色的渐变

    canvasGradient.addColorStop(1, "red");

    //将strokeStyle的属性值设为该CanvasGradient对象

    ctx.strokeStyle = canvasGradient;

   

    //最后，绘制出当前绘制路径的图形效果

    ctx.stroke(); 

 

2.实现放射性颜色渐变  

//绘制一个以坐标点(100,100)为圆心、半径为50px的圆形

    ctx.arc(100, 100, 50, 0, Math.PI * 2, false);
    
    //创建一个表示放射性颜色渐变的CanvasGradient对象
    //该对象的作用域是以(100,100)为圆心、半径为10px的内圆和以(100,100)为圆心、半径为50px的外圆之间的环状区域

    var canvasGradient = ctx.createRadialGradient(100, 100, 10, 100, 100, 50);

    //在offset为0的位置(即内圆的圆圈处)添加一个蓝色的渐变

    canvasGradient.addColorStop(0, "blue");

    //在offset为0.5的位置(环状区域从内到外放射50%的中间位置)添加一个绿色的渐变

    canvasGradient.addColorStop(0.5, "green");

    //在offset为0的位置(即外圆的圆圈处)添加一个红色的渐变

    canvasGradient.addColorStop(1, "red");

    //将fillStyle的属性值设为该CanvasGradient对象

    ctx.fillStyle = canvasGradient;
    
    ctx.fill();

PS:放射性颜色渐变效果一般用于圆形、扇形等从某处开始向周围发散的图形，不过，放射性颜色渐变效果同样可以用于其他图形。它并不依赖于图形，而是依赖于创建CanvasGradient对象时所指定的作用区域。不管是何种图形，它都会在指定的作用区域内实现对应的颜色渐变效果。