js 代码

function draw3() {
            var ctx = document.getElementById('myCanvas3').getContext('2d');
            var lingrad = ctx.createLinearGradient(0, 0, 0,300) /* x0 y0 x1 y1 渐变开始xy轴坐标，渐变结束xy轴坐标*/;
            lingrad.addColorStop(0, '#ff0000');/*设置色值及色值变化点*/
            lingrad.addColorStop(1/7, '#ff9900');
            lingrad.addColorStop(2/7, '#ffff00');
            lingrad.addColorStop(3/7, '#00ff00');
            lingrad.addColorStop(4/7, '#00ffff');
            lingrad.addColorStop(5/7, '#0000ff');
            lingrad.addColorStop(6/7, '#ff00ff');
            lingrad.addColorStop(1, '#ff0000');
            ctx.fillStyle = lingrad;/*填充样式*/
            ctx.strokeStyle = lingrad; /*边框样式*/
            ctx.fillRect(0, 0, 300, 300);//填充区域
        }
        window.onload = function () {
                        draw3();
        }       

html 代码

<canvas id="myCanvas3" width="300" height="300"></canvas>

效果图：

gradientColor.png

绘制圆环渐变
js 代码：

function draw4() {
            var ctx = document.getElementById('myCanvas4').getContext('2d');
            var radgrad = ctx.createRadialGradient(55, 55, 20, 100, 100, 90);/*渐变开始圆的中中心，半径，渐变结束圆的中心半径*/
            radgrad.addColorStop(0, '#ffffff');
            radgrad.addColorStop(0.75, '#333333');/*添加渐变的色值点*/
            radgrad.addColorStop(1, '#000000');
            ctx.fillStyle = radgrad;/*填充方式*/
            ctx.fillRect(0, 0, 300, 300);/*填充区域*/
        }
        window.onload = function () {
                       draw4();
        }       

html 代码

<canvas id="myCanvas4" width="300" height="300"></canvas>

效果图：

radial.png