html5 canvas 颜色渐变
<script type="text/javascript">
??? 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);
?
??? }