html canvas颜色渐变色,html5 canvas 颜色渐变

function canvasOperator() {

var myCanvas = document.getElementById('myCanvas');

var context = myCanvas.getContext('2d');

//line gradients

var lineGradients = context.createLinearGradient(0, 0, 500, 0);

lineGradients.addColorStop(0, 'black');

lineGradients.addColorStop(1, 'white');

context.fillStyle = lineGradients;//give gradient object to context.fillStyle

context.fillRect(0, 0, 500, 200);

var myCanvas1 = document.getElementById('myCanvas1');

var context1 = myCanvas1.getContext('2d');

//line gradients

var lineGradients1 = context1.createLinearGradient(0, 0, 0, 200);

//渐变位置可以在0和1之间任意位置取值

lineGradients1.addColorStop(0, 'black');

lineGradients1.addColorStop(1, 'white');

lineGradients1.addColorStop(0.7, 'blue');

lineGradients1.addColorStop(0.5, 'red');

//fillStyle:可以设置为css颜色，一个图案或一种颜色渐变

context1.fillStyle = lineGradients1;//give gradient object to context1.fillStyle

context1.fillRect(0, 0, 200, 500);

var myCanvas2 = document.getElementById('myCanvas2');

var context2 = myCanvas2.getContext('2d');

//沿着两个圆之间的锥面，绘制渐变。前三个参数代表开始的圆，圆心为(x0,y0),半径为r0.最后三个参数代表结束的圆，圆心为

//(x1,y1),半径为r1

var radialGradient = context2.createRadialGradient(100,100,50,400,400,50);

context2.fillStyle=radialGradient;

radialGradient.addColorStop(0, 'black');

radialGradient.addColorStop(1, 'white');

context2.fillRect(0, 0, 500, 500);

}