參考文檔

• MDN
• w3schook

canvas基本使用

• canvas坐標(biāo)系

location.jpg

• 繪圖基本步驟

// 獲取canvas畫布
var cas = document.getElementById('cas');
// 獲取繪圖工具
var ctx = cas.getContext('2d');
// 設(shè)置繪圖起始位置
ctx.moveTo(10,10);
// 繪制路徑
ctx.lineTo(100,100);
// 描邊
ctx.stroke();

繪制圖形

• 路徑的概念
• 路徑繪制方式(路徑與隱形墨水)
  • 描邊 stroke()
  • 填充 fill()
  • 既描邊又填充 stroke() 和 fill()

path.jpg

• 繪制曲線（函數(shù)方程-貝塞爾曲線）

  • 方程曲線繪制

• 手動閉合與closePath()閉合路徑

• 非零環(huán)繞規(guī)則

zero.jpg

• beginPath() 開啟新的路徑

繪制圖形樣式設(shè)置

• 畫筆的狀態(tài)
  • lineWidth 線寬，默認(rèn)1px
  • lineCap 線末端類型：(butt默認(rèn))抹腿、round、square
  • lineJoin 相交線的拐點(diǎn) miter(默認(rèn))、round、bevel
  • strokeStyle 線的顏色
  • fileStyle 填充顏色
  • setLineDash() 設(shè)置虛線
  • getLineDash() 獲取虛線寬度集合
  • lineDashOffset 設(shè)置虛線偏移量（負(fù)值向右偏移）

save()和restore()

繪制矩形

• rect(x,y,w,h) 沒有獨(dú)立路徑
• strokeRect(x,y,w,h) 有獨(dú)立路徑赘那，不影響別的繪制
• fillRect(x,y,w,h) 有獨(dú)立路徑显拳，不影響別的繪制
• clearRect(x,y,w,h) 擦除矩形區(qū)域

逐幀動畫

• setInterval()

繪制圓弧

• 弧度概念
• arc()
  • x 圓心橫坐標(biāo)
  • y 圓心縱坐標(biāo)
  • r 半徑
  • startAngle 開始角度
  • endAngle 結(jié)束角度
  • anticlockwise 是否逆時針方向繪制（默認(rèn)false表示順時針；true表示逆時針）

繪制文本

• ctx.font = '微軟雅黑' 設(shè)置字體
• strokeText()
• fillText(text,x,y,maxWidth)
  • text 要繪制的文本
  • x,y 文本繪制的坐標(biāo)（文本左下角）
  • maxWidth 設(shè)置文本最大寬度骏庸，可選參數(shù)
• ctx.textAlign文本水平對齊方式，相對繪制坐標(biāo)來說的
  • left
  • center
  • right
  • start 默認(rèn)
  • end
  • direction屬性css(rtl ltr) start和end于此相關(guān)
    • 如果是ltr,start和left表現(xiàn)一致
    • 如果是rtl,start和right表現(xiàn)一致
• ctx.textBaseline 設(shè)置基線（垂直對齊方式 ）
  • top 文本的基線處于文本的正上方年叮，并且有一段距離
  • middle 文本的基線處于文本的正中間
  • bottom 文本的基線處于文本的證下發(fā)具被，并且有一段距離
  • hanging 文本的基線處于文本的正上方，并且和文本粘合
  • alphabetic 默認(rèn)值只损，基線處于文本的下方一姿，并且穿過文字
  • ideographic 和bottom相似，但是不一樣
• measureText() 獲取文本寬度obj.width

水平和垂直對齊練習(xí)

繪制完整的餅圖

繪制圖片

• drawImage()
  • 三個參數(shù)drawImage(img,x,y)
    • img 圖片對象改执、canvas對象啸蜜、video對象
    • x,y 圖片繪制的左上角
  • 五個參數(shù)drawImage(img,x,y,w,h)
    • img 圖片對象、canvas對象辈挂、video對象
    • x,y 圖片繪制的左上角
    • w,h 圖片繪制尺寸設(shè)置(圖片縮放衬横，不是截取)
  • 九個參數(shù)drawImage(img,x,y,w,h,x1,y1,w1,h1)
    • img 圖片對象、canvas對象终蒂、video對象
    • x,y,w,h 圖片中的一個矩形區(qū)域
    • x1,y1,w1,h1 畫布中的一個矩形區(qū)域

變換

• 平移 移動畫布的原點(diǎn)
  • translate(x,y) 參數(shù)表示移動目標(biāo)點(diǎn)的坐標(biāo)
• 旋轉(zhuǎn)
  • scale(x,y) 參數(shù)表示寬高的縮放比例
• 縮放
  • rotate(angle) 參數(shù)表示旋轉(zhuǎn)角度

序列幀動畫畫法

• requestAnimationFrame()

判斷點(diǎn)是否繪制在指定路徑上

• isPointInPath()

flappybird小游戲