canvas（四） Gradient- demo

/**

 * Created by xianrongbin on 2017/3/9.

 */

/* strokeStyle 或 fillStyle 属性的值*/

/**

 * Demo1  创建线性渐变

 */

var dom = document.getElementById('clock'),

    ctx = dom.getContext('2d');

var linearGrad=ctx.createLinearGradient(-,,,);//此时是斜型渐变 ，将最后参数变成0，则为 横向渐变

//CanvasGradient.prototype.addColorStop = function(offset,color) {};

linearGrad.addColorStop(0.0,'white');// offset 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置

linearGrad.addColorStop(0.25,'green');

linearGrad.addColorStop(0.5,'blue');

linearGrad.addColorStop(0.75,'yellow');

linearGrad.addColorStop(0.8,'#Efff12');

ctx.fillStyle=linearGrad;

ctx.fillRect(,,,);

/**

 * Demo2 创建径向渐变

 */

var dom1 = document.getElementById('canvasItem'),

    ctx1 = dom1.getContext('2d');

/**

 * 渐变的开始圆 x，y坐标，半径

 * 渐变的结束圆

 */

var radialGrad=ctx1.createRadialGradient(,,,,,);

radialGrad.addColorStop(0.25,'yellow');

radialGrad.addColorStop(0.5,'green');

radialGrad.addColorStop(0.75,'blue');

radialGrad.addColorStop(1.0,'red');

ctx1.fillStyle=radialGrad;

ctx1.fillRect(,,,);