Canvas學習筆記

　　* 自用筆記：Canvas學習 *

canvas簡介

1. Canvas簡介：
   
   • 概念：H5 提供的一個新的標籤元素。中文：畫布
     Canvas是指 可以在其上面 通過腳本語言（通常爲js） 繪製圖形、圖像以及製作動畫的標籤。
   • Canvas本身不具備 繪製能力，只是負責展示。
   • 在瀏覽器不支持Canvas時，會將其當做div標籤來解析。
   • 在IE中，會將其當做文本節點來解析

2. 基本使用

   • 創建一個畫布
     javascript
<canvas>在瀏覽器不支持canvas時，會顯示這段文本。</canvas>

     
     • 在創建一canvas標籤時，如果沒有指定寬和高，默認爲 300 * 150 （px）
     • 要用canvas的相關屬性設置其寬和高；否則，用其他方式指定canvas的寬和高，會在默認值的基礎上進行縮放。
       而在縮放時，並沒有增加canvas內部的像素點的個數。
   • 獲取繪製工具
     javascript
// 第1步：獲取相應畫布
var canvas = document.getElementById('canvasId');
// 第2步：獲取該畫布的繪製工具
var ctx = canvas.getContext('2d|WebGL');

     
     • getContext方法：參數爲 ‘2d’ or ‘WebGL’
       2d: 獲取繪製平面圖形的工具
       WebGL：獲取繪製立體圖形的工具
     • 在課程內，只學習繪製 2d 圖形
     • 繪製工具是由歸屬的。只有畫布自己的繪製工具 可以在本身上繪製圖形、圖像。
   • 座標系
     
     • 原點 在canvas的左上角；
     • X軸：在原點的水平方向
     • Y軸：在原點的垂直方向
   • 基本繪製工具
     
     • 移動筆觸moveTo(x, y) x 確定點的 橫座標；y 確定點的 縱座標。
     • 畫線lineTo(x, y): 從當前筆觸所在點 連線 到 指定點。
   • 繪製直線步驟
     
     • 移動筆觸moveTo
     • 畫線lineTo
     • 描邊stroke 或 填充fill
   • 練習
     
     • 繪製矩形
     • 繪製三角形
     • 梯形

   3 . 路徑的概念

   • ctx.beginPath(): 開啓路徑。
   • ctx.closePath(); 閉合路徑。
     
     • 將圖形的起始點與終止點進行連線，形成一個封閉的圖形
     • 會自動處理封閉圖形的鋸齒
   • 注意：
     
     1. 只有在需要開始新路徑時，調用beginPath方法；
        在需要將圖形閉合，形成封閉的圖形，那麼就可以調用closePath方法。
     2. 這兩個方法並不一定要成對出現。
   • 除了stroke-或fill-開頭的方法之外，都會繪製路徑。此時需要手動調用stroke或fill方法
     +

   4 . 線性相關的屬性

   • lineWidth： 設置線寬
   • strokeStyle：設置線條顏色，值可以爲 16進制、顏色字符串、rgb、rgba、漸變色
   • fillStyle: 設置填充顏色
   • lineCap ：設置線段兩端的樣式
     
     • ’butt’: 默認
     • ‘round’: 設置線段兩端爲突出的圓角圖形
     • ‘square’:設置線段兩端爲突出的方形圖形
   • lineJoin: 設置線段相交點的樣式
     
     • ’round’ ：圓角樣式
     • ‘bevel’ : 平角樣式
     • ‘miter’ : 尖角樣式

   5 . 非零環繞原則

   • 目的：確定某一區域是否需要填充。
   • 描述：定義計數默認爲0，從當前區域選取任意點，然後從該點到整個圖形外部繪製一條射線。
     觀察和這條射線相交的所有線段。
     如果該相交的線段是順時針穿過這條射線，那麼 計數 + 1；如果是逆時針穿過，那麼計數就 - 1；
     如果計數爲 0，那麼就不填充該區域；
     如果計數非 0 ，那麼就填充該區域。
   • 練習：繪製空心矩形
   • 總結：從左到右穿出 或 從上至下 穿出，那麼就是順時針。計數 + 1；
     否則， 計數 - 1；

   6 . 奇-偶原則

   • 目的：同上
   • 描述：就看相交線的個數，如果爲奇數，就填充；否則就不填充。

   7 . 縱向的顏色漸變
   8 . 繪製座標系
   9 . 折線圖中點的描繪

   • 用小矩形來描繪點