HTML5内向外渐变,（转）HTML5之渐变

渐变

window.οnlοad=function(){varmycan=document.getElementById("myCanvas");varcanxt=mycan.getContext("2d");//在一个矩形中尝试做渐变

varmylinear=canxt.createLinearGradient(0,0,150,50);//创建一个线性渐变

mylinear.addColorStop(0,"red");

mylinear.addColorStop(0.5,"yellow");

mylinear.addColorStop(1,"green");//把渐变对象赋值给fillstyle,理解(和填充颜色联系起来，这里不同的就是纯色用渐变对象取代了，我们还是在对canxt操作)，关键

canxt.fillStyle=mylinear;//绘制矩形

canxt.fillRect(0,0,150,50);//必不可少

//为文字创建一个渐变

varlinearText=canxt.createLinearGradient(300,50,600,50);

linearText.addColorStop(0,"#000");

linearText.addColorStop(0.5,"#abcdef");

linearText.addColorStop(1,"#fff");

canxt.fillStyle=linearText;

canxt.font="30px Arial";

canxt.textBaseline="top";//文字对齐方式，在canxt中，要看实际效果

canxt.fillText("Linear canxt!!",300,50);//参数表示文字x,y轴的位置//对角线上的渐变

varfillColordiagonal=canxt.createLinearGradient(50,200,100,450);//渐变颜色

fillColordiagonal.addColorStop(0.2,"red");

fillColordiagonal.addColorStop(0.4,"black");

fillColordiagonal.addColorStop(0.6,"green");

fillColordiagonal.addColorStop(0.75,"yellow");//把渐变对象赋值给fillstyle

canxt.fillStyle=fillColordiagonal;//绘制矩形

canxt.fillRect(50,225,100,250);//绘制径向渐变

fillColorRadial=canxt.createRadialGradient(450,300,0,450,300,200);//径向渐变——createradialGradient(x0,y0,r0,x1,y1,r1)——使用六个参数以一种圆形或是圆锥形的模式来组合两种或多种颜色。

//1. (x0,y0)： 圆锥的第一个圆的中心

//2. r0：第一个圆的半径

//3. (x1,y1)：圆锥的第二个圆的中心

//4. r1：第二个圆的半径

fillColorRadial.addColorStop(0.1,"#f00");

fillColorRadial.addColorStop(0.3,"#f66");

fillColorRadial.addColorStop(0.5,"#f6c");

fillColorRadial.addColorStop(0.7,"#fc0");

fillColorRadial.addColorStop(0.9,"#ff0");

canxt.fillStyle=fillColorRadial;

canxt.rect(300,200,500,400);//x,y,l,w

canxt.fill();

}