漸變

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中其他元素對齊方式并不一樣。
怎么讓文字居中呢？請看以下實例

    <canvas id="canvas" width="400px" height="400px" ></canvas>

    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，表示順時針