H5小內容（三）

Canvas(畫布)
   基本內容
     簡單來講,HTML5提供的新元素<canvas>
     Canvas在HTML頁面提供畫布的功能
       在畫布中繪製各類圖形
     Canvas繪製的圖形與HTML頁面無關
       沒法經過DOM獲取繪製的圖形
       沒法爲繪製的圖形綁定DOM事件
     只能使用Canvas提供的API
     Canvas用途
       在HTML頁面中繪製圖表(例如柱狀圖、餅狀圖等)
       網頁遊戲 - Flash技術
         使用HTML5中的Canvas
   如何使用Canvas
     在HTML頁面中定義<canvas>元素
     在javascript代碼中
       獲取<canvas>元素
       建立畫布對象
         getContext('2d')方法
       使用Canvas提供的API
   繪製圖形
     繪製矩形
       fillRect(x,y,width,height) - 實心矩形
         x和y - 矩形的左上角座標值
  width - 設置矩形的寬度
  height - 設置彗星的高度
       strokeRect(x,y,width,height) - 空心矩形
       clearRect(x,y,width,height)
         清除指定區域的矩形
     設置顏色
       fillStyle - 設置填充顏色
       strokeStyle - 設置描邊顏色
       globalAlpha - 設置透明度(0-1)
     設置漸變
       線型漸變 - createLinearGradient(x1,y1,x2,y2)
         具備基準線 - 起點(x1,y1)和終點(x2,y2)
       扇形(射線)漸變 - createRadialGradient(x1,y1,r1,x2,y2,r2)
         具備柱形(錐形) - 兩個圓的面積
  參數
    x1和y1 - 第一個圓的圓心座標值
    r1 - 第一個圓的半徑
    x2和y2 - 第二個圓的圓心座標值
    r2 - 第二個圓的半徑

繪製圖形
     繪製文字
       方法
         fillText(text,x,y) - 實心文字
    text - 繪製的文字內容
    x和y - 繪製的座標值
  strokeText(text,x,y) - 空心文字
       屬性
         font - 相似於CSS中的font屬性
  textAlign - 設置文字的水平方向對齊
    left - 左對齊
    center - 水平居中
    right - 右對齊
  textBaseline - 設置文字的垂直方向對齊
    top - 頂部對齊
    middle - (垂直)居中對齊
    bottom - 底部對齊
    hanging - 懸掛基線
    alphabetic - 字母基線
         注意
    不管是水平方向仍是垂直方向對齊,基準線對齊,並非文字對齊
    不管是水平方向仍是垂直方向對齊,並非必要的屬性(不使用也是能夠的)
     陰影效果
       shadowColor - 設置陰影顏色
       shadowOffsetX - 設置水平方向陰影
       shadowOffsetY - 設置垂直方向陰影
       shadowBlur - 設置陰影的模糊程度
     建立路徑
       (標識)方法
         beginPath() - 表示開始建立路徑
  closePath() - 表示結束建立路徑
       設置方法
         rect(x,y,width,height) - 設置矩形形狀
    x和y - 設置矩形的左上角座標值
    width和height - 設置矩形的寬度和高度
  arc(x,y,radius,startAngle,endAngle,direction) - 設置圓形形狀
    x和y - 設置圓形的圓心座標值
    radius - 設置圓形的半徑
    startAngle和endAngle - 設置圓形的起始位置
    direction - 按照順時針或逆時針繪製
       繪製方法
         stroke() - 繪製輪廓
  fill() - 繪製填充
     繪製線條(直線和折線、多邊形) - 建立路徑
       moveTo(x,y) - 設置這條線的起點座標值
       lineTo(x,y) - 設置這條線的終點(折點)座標值
   設置線條
     lineWidth - 設置線條的寬度
       默認值爲1(px)
     lineCap - 設置線條端點的形狀
       butt - 默認值,平直
       round - 圓角
       square - 正方向
     lineJoin - 設置兩條線焦點的形狀
       miter - 默認值,尖角
       round - 圓角
       bevel - 斜角
     miterLimit - 配合lineJoin使用
       lineJoin設置爲miter,該屬性值設置尖角的延伸範圍
  Canvas處理圖片
   繪製圖片
     drawImage(img,x,y) - 按照圖片原大小加載
       img - 當前加載(繪製)的圖片
       x和y - 繪製圖片的座標值(左上角)
     drawImage(img,x,y,width,height) - 按照指定大小加載圖片
       img - 當前加載(繪製)的圖片
       x和y - 繪製圖片的座標值(左上角)
       width和height - 設置繪製圖片顯示的寬度和高度
     注意
       必須保證圖片加載完畢(onload事件)後,再繪製圖片
   平鋪圖片
     createPattern(img,type)
       img - 平鋪的圖片
       type - 平鋪的方式
         repeat - 平鋪
  no-repeat - 不平鋪
  repeat-x - 水平方向平鋪
  repeat-y - 垂直方向平鋪
     注意
       必須保證圖片加載完畢(onload事件)後,再繪製圖片
   切割圖片
     clip() - 切割(按照建立路徑使用)
   畫布方法
     scale(x,y) - 縮放(縮小或放大)
       x - 表示水平方向的縮放
       y - 表示垂直方向的縮放
       參數的取值
         若是爲1的話,表示不縮放(原大小)
  若是小於1的話,表示縮小
  若是大於1的話,表示放大
     translate(x,y) - 從新定位(x,y)
       x和y - 新的座標值
       注意 - x和y是相對於上次定位座標值
     rotate(旋轉角度) - 旋轉畫布
       公式爲 degrees Math.PI / 180;
  Chart.js - Canvas的JS庫
   做用 - 提供各類圖表
   如何使用
     在HTML頁面中引入Chart.js文件
     在HTML頁面中定義<canvas>元素
     在javascript代碼中
       獲取<canvas>元素
       建立畫布對象
         var context = canvas.getContext("2d");
       經過畫布對象,建立Chart對象
         var chart = new Chart(context);
       利用Chart對象調用API方法
         var data = [];
  chart.Pie(data);
   提供6種圖表
     柱狀圖 - Bar(data,options)
     餅狀圖 - Pie(data,options)
     曲線圖 - Line(data,options)
     環形圖 - Doughnut(data,options)
     雷達圖 - Radar(data,options)

    極地區域圖 - PolarArea(data,options)