H5中canvas的渐变、文字、阴影、创建路径

---

渐变

canvas支持的渐变效果包括线性渐变或射线渐变，并且支持颜色转折点

            //1.获取渐变对象
            var canvas=document.getElementById("canvas");
            var painter=canvas.getContext("2d");
            var grd=painter.createLinearGradient(0,200,200,200);

            //2.渐变的颜色
            //参数：指定颜色的位置，取值范围0-1，相对于渐变的范围
            grd.addColorStop(0,"red");
            grd.addColorStop(0.5,"green");
            grd.addColorStop(1,"blue");
            
            //3.将渐变对象赋值给填充颜色
            painter.fillStyle=grd;
            
            //4.绘图
            painter.fillRect(0,0,200,200);

---

绘制文字 text

属性：font，其与css中的font属性类似，接受值完全相信。不过绘制文字时，设置文字大小时候，要先设置文字字体，否则没有效果

方法：

   1）在指定位置绘制空心文字，后面的x,y指的是左下角的坐标

       strokeText(text,x,y)
    
   2）在指定位置绘制实心文字

       fillText(text,x,y)

   3）返回指定文字的大小信息

       measureText()

文字对其方式：水平对齐（textalign）、垂直对其（textBaseline）

textalign: left、right和center；
textBaseline:top、middle和bottom，alphabetic（默认值，字母基线）hanging（ 悬挂基线）

绘制基准线

    context.beginPath();
    context.moveTo(200,0);
    context.lineTo(200,400);
    context.stroke();

首先我们得注意，所谓文字对齐并不是相对画布对齐的，是相对于它自己的左、下基准线对齐的，这跟HTML5中其他元素对齐方式并不一样。
怎么让文字居中呢？请看以下实例

    

    var canvas=document.getElementById("canvas");
    var painter=canvas.getContext("2d");
    //1.设置文本的样式
    painter.font="bold 50px red 微软雅黑 "; //设置水平居中
    painter.textAlign="center";//设置垂直居中
    painter.textBaseline="middle";
    painter.strokeText("哈哈哈哈",200,200);

注意：painter.strokeText("哈哈哈哈",200,200)中的横纵坐标是指第一个文字        
     的左下角坐标，要使文字水平垂直都居中，需要将其横纵坐标设为画布的横纵坐标
     的一半，并让textAlign的属性值center，textBaseline属性值为middle;

---

阴影 shadow

     1、使用CSS语法声明阴影颜色
        shadowColor

     2、接受一个数字，确定对象阴影的水平投射距离
        shadowOffsetX

     3、接受一个数字，确定对象阴影的垂直投射距离
        shadowOffsetY

     4、为阴影生成模糊效果
        shadowBlur

---

创建路径-绘制矩形和圆形

 1、标识方法
      beginPath() 开始创建路径，每次绘制新图形之前，都要先重新创建一个路径
      closePath()  结束创建路径，主要用于让线条闭合
     
 2、设置方法
      rect(x,y,width,height) 设置矩形形状
      x和y - 矩形的左上角
      width/height - 矩形的宽和高

      arc(x,y,radius,startAngle,endAngle,direction)设置圆形形状
          x/y - 设置圆心的坐标值
          radius - 圆形的半径
          startAngle - 开始位置
          endAngle - 结束位置
          direction - 方向：默认值为false，表示顺时针