canvas 簡介

Canvas的概述

定義

• <canvas>是H5新增的標籤
• canvas提供給了 javascript 繪圖接口
• canvas繪圖創建在座標系上

應用領域

• 炫酷特效、banner
• 可視化數據（圖表）
• 遊戲
• 大型應用（地圖）
• 在線系統 （在線PS ）

canvas標籤

• 屬性 width
• 屬性 height
• 方法 getContext() 可選的參數 "2d" / "webgl" 返回上下文環境

繪圖環境

• 該對象提供API，讓JavaScript來繪製圖形

繪圖基礎

路徑的開啓和閉合

• beginPath() 開啓路徑
• closePath() 關閉路徑 （把路徑閉合）

設置起點

• moveTo(x, y)

畫線

• lineTo(x , y) 繪製直線

描邊

• lineWidth 屬性 設置描邊線的粗細
• strokeStyle 屬性 設置描邊顏色
• stroke() 繪製

填充

• fillStyle 屬性 填充顏色
• fill() 執行填充

快速矩形

• rect(x, y, width, height) 繪製矩形路徑
• strokeRect(x, y, width, height) 描邊矩形
• fillStroke(x, y, width, height) 填充矩形
• clearRect(x, y, width. height) 清除矩形 （能夠用來清除屏幕）

圓弧

• arc(x, y, radius, start, end, true/false) 圓弧路徑
• start 表示開始的弧度（位置） 0弧度是三點鐘方向
• end 表示結束的弧度（位置）
• 默認false 表示順時針

繪製文字

• font 屬性 設置文字的風格、大小、字體 值 同css的font屬性
• textAlign 屬性 文字水平對齊方式 (start/left/center/right/end)
• textBaseline 屬性 文字的垂直對齊方式 (top/middel/bottom/alphabetic)
• strokeText(text, x, y) 描邊字
• fillText(text, x, y) 填充字
• measureText(text) 返回對象 文字的寬度 取決於字體大小

繪製圖片

• drawImage(img, x, y) 簡單繪製圖片
• drawImage(im, x, y, w, h) 繪製圖片並指定在畫布上的大小
• drawImage(im, sx, sy, sw, sh, x, y, w, h) 裁剪圖片並把裁剪部分繪製到畫布
• 其中 img是圖片的dom對象， 配合onload事件

設置陰影

• shadowColor 陰影顏色
• shadowBlur 陰影模糊值
• shadowOffsetX 陰影x偏移量
• shadowOffsetY 陰影y偏移量

漸變

• createLinearGradient(x, y, x1, y1) 建立線性漸變
• createRadialGradient(cx1, cy1, r1, cx2, cy2, r2);

線條樣式

• lineCap 屬性 線條兩端樣式 butt/round/square
• lineJoin 屬性 線條相交樣式 miter/bevel/square

---

Cavnas 高級

變換--位移

• translate(x, y)

變換-縮放

• scale(xS, yS)

變換-旋轉

• rotate(弧度)

環境的保存和釋放

• save()

• restore()

  設置透明度

• globalAlpha 屬性 設置繪圖環境的不透明度 值 0~1之間

限制繪圖區域

• clip() 配合路徑。 對繪圖環境進行的限制

輸入base64編碼

• canvasEle.toDataURL()

畫布渲染畫布

• 使用 drawImage() 把canvas元素當作img元素

貝塞爾曲線

• bezierCurveTo()

繪製圓角

• arcTo(x1, y1, x2, y2, r);

Cavnas 第三方類庫

常見的第三方類庫

• konva.js
• chart.js 圖表插件
• eccharts 圖表插件(百度)
• tree.js (3d webgl 庫)

第三方類庫 Konva

Konva的結構

• 舞臺 (stage)--> 層(layer) --> 圖形
• Statge --> Layer ---> 分組 （--->分組---->） ---> 圖形

Konva 繪製圖形

• Konva.Rect
• Konva.Circle
• Konva.Wedge
• Konva.Line
• Konva.Star
• Konva.Image
• ......