參考文檔
canvas基本使用
- canvas坐標系
location.jpg
- 繪圖基本步驟
// 獲取canvas畫布
var cas = document.getElementById('cas');
// 獲取繪圖工具
var ctx = cas.getContext('2d');
// 設置繪圖起始位置
ctx.moveTo(10,10);
// 繪制路徑
ctx.lineTo(100,100);
// 描邊
ctx.stroke();
繪制圖形
- 路徑的概念
- 路徑繪制方式(路徑與隱形墨水)
- 描邊 stroke()
- 填充 fill()
- 既描邊又填充 stroke() 和 fill()
path.jpg
-
繪制曲線（函數方程-貝塞爾曲線）
手動閉合與closePath()閉合路徑
非零環繞規則
zero.jpg
- beginPath() 開啟新的路徑
繪制圖形樣式設置
- 畫筆的狀態
- lineWidth 線寬，默認1px
- lineCap 線末端類型：(butt默認)、round、square
- lineJoin 相交線的拐點 miter(默認)、round、bevel
- strokeStyle 線的顏色
- fileStyle 填充顏色
- setLineDash() 設置虛線
- getLineDash() 獲取虛線寬度集合
- lineDashOffset 設置虛線偏移量（負值向右偏移）
save()和restore()
繪制矩形
- rect(x,y,w,h) 沒有獨立路徑
- strokeRect(x,y,w,h) 有獨立路徑，不影響別的繪制
- fillRect(x,y,w,h) 有獨立路徑，不影響別的繪制
- clearRect(x,y,w,h) 擦除矩形區域
逐幀動畫
- setInterval()
繪制圓弧
- 弧度概念
- arc()
- x 圓心橫坐標
- y 圓心縱坐標
- r 半徑
- startAngle 開始角度
- endAngle 結束角度
- anticlockwise 是否逆時針方向繪制（默認false表示順時針；true表示逆時針）
繪制文本
- ctx.font = '微軟雅黑' 設置字體
- strokeText()
- fillText(text,x,y,maxWidth)
- text 要繪制的文本
- x,y 文本繪制的坐標（文本左下角）
- maxWidth 設置文本最大寬度，可選參數
- ctx.textAlign文本水平對齊方式，相對繪制坐標來說的
- left
- center
- right
- start 默認
- end
- direction屬性css(rtl ltr) start和end于此相關
- 如果是ltr,start和left表現一致
- 如果是rtl,start和right表現一致
- ctx.textBaseline 設置基線（垂直對齊方式 ）
- top 文本的基線處于文本的正上方，并且有一段距離
- middle 文本的基線處于文本的正中間
- bottom 文本的基線處于文本的證下發，并且有一段距離
- hanging 文本的基線處于文本的正上方，并且和文本粘合
- alphabetic 默認值，基線處于文本的下方，并且穿過文字
- ideographic 和bottom相似，但是不一樣
- measureText() 獲取文本寬度obj.width
水平和垂直對齊練習
繪制完整的餅圖
繪制圖片
- drawImage()
- 三個參數drawImage(img,x,y)
- img 圖片對象、canvas對象、video對象
- x,y 圖片繪制的左上角
- 五個參數drawImage(img,x,y,w,h)
- img 圖片對象、canvas對象、video對象
- x,y 圖片繪制的左上角
- w,h 圖片繪制尺寸設置(圖片縮放，不是截取)
- 九個參數drawImage(img,x,y,w,h,x1,y1,w1,h1)
- img 圖片對象、canvas對象、video對象
- x,y,w,h 圖片中的一個矩形區域
- x1,y1,w1,h1 畫布中的一個矩形區域
- 三個參數drawImage(img,x,y)
變換
- 平移 移動畫布的原點
- translate(x,y) 參數表示移動目標點的坐標
- 旋轉
- scale(x,y) 參數表示寬高的縮放比例
- 縮放
- rotate(angle) 參數表示旋轉角度
序列幀動畫畫法
- requestAnimationFrame()
判斷點是否繪制在指定路徑上
- isPointInPath()
