Canvas

• 概念：HTML5新增元素，可以通過JavaScript指令碼來繪製圖形，製作照片，建立動畫，甚至可以進行實時視訊處理和渲染。

• 屬性：

  • 高 預設150。

  • 寬 預設300。

  • 注：可以用css定義，但是如果css尺寸和畫布比例不一致會出現扭曲現象。這時候可以用高寬屬性取明確規定，而不是用css樣式。

• 替換內容

  • 當沒寫瀏覽器不支援canvas時，可以通過在canvas中定義文字或者圖片來替換內容。當瀏覽器不支援canvas時，容器會被忽略進行後備內容得渲染。

  • </canvas>結束標籤不可預設。

• 渲染上下文

  • 通過getContext()方法獲得渲染上下文和它得繪畫功能。

    • 一個引數 2d/3d。

  • 可以通過ctx.getContext來檢查程式碼得支援程度。

• 繪製圖形

  • 座標：柵格

    • 起點：左上角（原點）左右得元素都相對該點定位

  • 繪製矩形

    • fillRect 繪製一個填充矩形

    • strokeRect 繪製一個矩形得邊框

    • clearRect 清除指定矩形區域，讓清除部分完全透明

  • 繪製路徑

    • ：影象得基本元素是路徑

    • 步驟

      1. 建立路徑起點

      2. 使用畫布命令取畫路徑

      3. 關閉路徑

      4. 通過描邊或者填充路徑區域來渲染圖形

    • 方法

      • beginpPath 新建一個路徑，生成之後，圖形繪製命令會指向到路徑上生產路徑。

      • moveTo 移動觸筆   （起點也是終點，可以通過使用moveTo函式改變位置，如果不改變將聯絡畫圖）

      • lineTo 繪製線 結束點

      • arc 或者圓弧/圓   引數說明

        • ,xy位繪製圓弧所在得圓心座標，。

        • radius定義圓弧所在園得半徑。

        • startAngle和endAngle定義開始以及結束得弧度。單位弧度

        • anticlockwise定義開始方向。

    • closePath 閉合路徑之後圖形繪製命令又重新指回上下文中。

    • stroke 通過線條來繪製圖形輪廓。

    • fill 通過填充路徑得內容區域生成實心圖形。呼叫該函式，所有未閉合得形狀會自動閉合，stroke除外。在路徑閉合之後，需要重新建立一個路徑，否則在描邊或者填充得時候會作用在上一個圖形。

    • 注：當路徑為空即beginPath之後或者canvas剛建立得時候，第一條路徑構造命令通常被視為moveTo，處於這個原因，幾乎總是要在路徑設定之後專門指定你得起始位值。

  • 貝塞爾曲線

    • quadraticCurveTo（cp1x,c1y,x,y）

      • cp1x和cp1y是一個控制點，xy位結束點

    • bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)

      • cp1x和cp1y是一個控制點，cp2x和cp2y是另一個控制點，xy位結束點

  • 繪製矩形

    • rect方法

      • 將一個矩形路徑新增到當前路徑上。

      • 該方法執行時，moveTo方法自動設定座標引數（0，0）=>觸筆自動重置位預設座標。

  • Path2D物件

    • 作用：快取和記錄繪畫命令和路徑。

    • addPath函式

      • 新增一條新路徑到當前路徑。

    • 引數可以使用SVG引數。

  • 色彩屬性

    • fillStyle

    • strokeStyle

    • globalAlpha 全域性透明

    • 線屬性

      • lineWidth

      • lineCap

      • lineJoin

      • .....

    • createLinearGradient  線性漸變   引數：

      • x1，y1，x2，y2   分別代表漸變得起點和終點

    • createGradialGradient 徑向漸變 引數：

      • x1，y1，r1，x2，y2  ，r2  前三個和後三個分別定義一個原點和半徑

    • 建立完成後賦值給fillStyle和strokeStyle屬性即可

  • 圖案樣式

    • createPattern 函式 引數：

      • image image物件得引用或者另外一個canvas物件

      • type 必須是repeat，repeat-x，repeat-y，no-repeat字串之一

    • 建立完成後賦值給fillStyle和strokeStyle屬性即可

    • 注：與drawImage不同，需要確認image已裝載完成，否在效果可能不對。處理方式，用image物件onload handler來確保設定之前圖案裝載完成。

  • 陰影 shadows

    • shadowOffsetX  設定陰影在X軸方向得延申距離

    • shadowOffsetY  設定陰影在Y軸方向得延申距離

    • shadowBlur  設定陰影得模糊程度

    • shadowColor  設定陰影得顏色效果

  • 變形

    • save()和restore()

      • save儲存當前狀態，（比如保持之前得填充藍色）

      • restore彈回上一個狀態 （比如上一個儲存狀態/最後一次save得狀態-是填充得藍色）

    • translate 移動座標原點

      • 通過和狀態保持和重置一起使用可以清晰得定點陣圖形得位置

    • rotate 以原點位中心  旋轉canvas

      • angle 旋轉角度 以弧度位單位，順時針旋轉

      • 注：旋轉是指畫圖形位置得座標相對改變，而不是圓本身

    • scale 縮放

    • transform 對變形矩陣直接修改 引數

      • m11 水平方向得縮放

      • m12 水平方向得偏移量

      • m21 豎直方向得偏移量

      • m22 豎直方向得縮放

      • dx 水平方向得移動

      • dy 豎直方向得移動

  • 合成與裁剪

    • globalCompositeOperation 這個屬性設定了在畫新圖時得遮罩策略

    • clip（）方法將當前正在構建得路徑轉化位剪裁路徑