Canvas

Canvas

canvas 最先由Apple引入WebKit,用於Mac OS X 的 Dashboard,後來又在Safari和Google Chrome被實現。 基於 Gecko 1.8的瀏覽器,好比 Firefox 1.5, 一樣支持這個元素。
<canvas> 元素是WhatWG Web applications 1.0規範的一部分,也包含於HTML 5中。

體驗Canvas

什麼是Canvas？

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。
畫布是一個矩形區域，您能夠控制其每一像素。
canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。

建立Canvas元素

向 HTML5 頁面添加 canvas 元素。
規定元素的 id、寬度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

Canvas座標系

經過JavaScript來繪製

/*獲取元素*/ var myCanvas = document.querySelector('#myCanvas'); /*獲取繪圖工具*/ var context = myCanvas.getContext('2d'); /*設置繪圖的起始位置*/ context.moveTo(100,100); /*繪製路徑*/ context.lineTo(200,200); /*描邊*/ context.stroke();

Canvas的基本使用

圖形繪製

須要理解些概念：

• 路徑的概念
• 路徑的繪製
  • 描邊 stroke()
  • 填充 fill()
    
• 閉合路徑
  • 手動閉合
  • 程序閉合 closePath()
• 填充規則(非零環繞)
  
• 開啓新的路徑 beginPath()

設置樣式

• 畫筆的狀態
  • lineWidth 線寬，默認1px
  • lineCap 線末端類型：(butt默認)、round、square
  • lineJoin 相交線的拐點 miter(默認)、round、bevel
  • strokeStyle 線的顏色
  • fillStyle 填充顏色
  • setLineDash() 設置虛線
  • getLineDash() 獲取虛線寬度集合
  • lineDashOffset 設置虛線偏移量（負值向右偏移）

實例練習

• 漸變色繪製
• 鏤空的房子
• 繪製座標網格
• 繪製座標系
• 繪製座標點
• 繪製折線圖

參考文檔

• w3school
• Canvas_API

Canvas圖形繪製

矩形繪製

• rect(x,y,w,h) 沒有獨立路徑
• strokeRect(x,y,w,h) 有獨立路徑，不影響別的繪製
• fillRect(x,y,w,h) 有獨立路徑，不影響別的繪製
• clearRect(x,y,w,h) 擦除矩形區域

圓弧繪製

• 弧度概念
• 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 畫布中的一個矩形區域

序列幀動畫

• 繪製精靈圖
• 動起來
• 控制邊界
• 鍵盤控制

座標變換

• 平移 移動畫布的原點
  • translate(x,y) 參數表示移動目標點的座標
• 縮放
  • scale(x,y) 參數表示寬高的縮放比例
• 旋轉
  • rotate(angle) 參數表示旋轉角度

​