canvas---绘制渐变矩形和字体

渐变效果如下：

能量补充站：

ctx.strokeText(text,x,y,maxWidth);	在画布上绘制文本。文本的默认颜色是黑色。text:文本，（x,y）文本开始位置，maxWidth:允许的最大文本宽度。 使用 font 属性来定义字体和字号，并使用 strokeStyle 属性以另一种颜色/渐变来渲染文本。
ctx.fillText(text,x,y,maxWidth);	在画布上绘制“被填充的”文本 使用 font 属性来定义字体和字号，使用 fillStyle 属性以另一种颜色/渐变来渲染文本。

ctx.createLinearGradient(x0,y0,x1,y1);	创建线性的渐变对象,渐变可用于填充矩形、圆形、线条、文本等等。(x0,y0)渐变开始点坐标，（x1,y1）渐变结束点坐标
gradient.addColorStop(stop,color);	stop:介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。 color：在结束位置显示的 CSS 颜色值
ctx.createRadialGradient(x0,y0,r0,x1,y1,r1);	创建放射状/环形的渐变（用在画布内容上） (x0,y0)渐变开始圆的圆心坐标，r0开始圆半径，（x1,y1）渐变结束圆的圆心坐标，r1结束圆半径

ctx.fillRect(x,y,width,height);

绘制“被填充”的矩形，默认黑色。(x,y)左上角坐标

ctx.fillStyle=”red”

设置填充颜色为红色

ctx.font="30px Verdana";

定义字体和字号

完整代码如下：

    
    
    
    

    



    
        不支持canvas的浏览器