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);//填充區(qū)域
        }
        window.onload = function () {
                        draw3();
        }       

html 代碼

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

效果圖：

gradientColor.png

繪制圓環(huán)漸變
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);/*填充區(qū)域*/
        }
        window.onload = function () {
                       draw4();
        }       

html 代碼

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

效果圖：

radial.png