canvas基礎
<canvas width="600" height="300" id="canvas">
請選擇支援canvas的瀏覽器
</canvas>
複製程式碼// 獲取canvas引用
const canvas = document.getElementById('canvas')
// 獲取繪圖上下文
const ctx = canvas.getContext('2d')
// 使用繪圖上下文在canvas元素上繪製
ctx.font = '38px Arial'
ctx.fillText(
'Hello Canvas',
canvas.width / 2 - 120, canvas.height / 2
)
複製程式碼Canvas尺寸
預設canvas元素大小是300x150畫素
兩套Canvas尺寸
- 元素本身大小
- 元素繪圖表面大小
兩套尺寸的對應關係
當
元素本身大小不符合元素繪圖表面大小時，瀏覽器就會對繪圖表面進行縮放，使其符合其元素本身大小
修改Canvas尺寸
- 設定元素的width和height
同時修改元素本身大小和元素繪圖表面大小
<canvas width="600" height="300"></canvas>
複製程式碼- 通過css修改width和height
只修改元素本身大小，元素繪圖表面大小還是300x150畫素
會對繪圖表面大小進行放大2倍，使其符合元素本身大小
<canvas id="canvas2" style="width: 600px;height: 300px;"></canvas>
複製程式碼對比兩種修改Canvas尺寸
Canvas的Api
屬性
| 屬性 | 描述 |
|---|---|
| width | 寬 |
| height | 高 |
方法
| 方法 | 描述 |
|---|---|
| getContext() | 返回繪圖上下文 |
| toDataUR() | 返回資料地址 |
| toBlob() | 返回一個Canvas元素影象檔案的Blob |
Canvas繪圖環境
CanvasRenderingContext2D
Canvas狀態的儲存及恢復
儲存和恢復當前canvas繪圖環境的所有屬性
ctx.fillStyle = 'red'
ctx.fillRect(10, 10, 80, 80) // red
ctx.save() // 儲存
ctx.fillStyle = 'blue'
ctx.fillRect(10, 100, 80, 80) // blue
ctx.restore() // 恢復
ctx.fillRect(10, 200, 80, 80) // red
複製程式碼支援巢狀
ctx.fillStyle = 'red'
ctx.fillRect(200, 10, 40, 40) // red
ctx.save() // 儲存1
ctx.fillStyle = 'blue'
ctx.fillRect(200, 60, 40, 40) // blue
ctx.save() // 儲存2
ctx.fillStyle = 'pink'
ctx.fillRect(200, 110, 40, 40) // pink
ctx.restore() // 恢復到儲存2
ctx.fillRect(200, 160, 40, 40) // blue
ctx.restore() // 恢復到儲存1
ctx.fillRect(200, 210, 40, 40) // red
複製程式碼window座標轉換成Canvas座標
const windowToCanvas = (canvas, event) => {
const { clientX, clientY } = event
const { left, top } = canvas.getBoundingClientRect()
return {
x: clientX - left,
y: clientY - top
}
}
複製程式碼Canvas繪製模式
Canvas元素採用
立即模式來繪製圖形的，立即將所指定的內容繪製在Canvas上，然後立馬忘記剛才繪製內容
常見canvas變化繪製方法
- 呼叫ctx.clearRect()進行清屏，然後重繪
- 使用ctx.getImageData()和ctx.putImageData()進行儲存及恢復
demo06
saveDrawingSurface(){
const { ctx } = this
const { canvas } = ctx
this.defaultCanvasImage = ctx.getImageData(
0, 0,
canvas.width, canvas.height
)
},
restoreDrawingSurface () {
const { ctx } = this
ctx.putImageData(
this.defaultCanvasImage,
0, 0
)
},
handleMouseDown () {
// 儲存繪圖環境的繪圖表面
this.saveDrawingSurface()
},
handleMouseMove (e) {
// 恢復繪圖表面
this.restoreDrawingSurface()
},
handleMouseUp () {
this.restoreDrawingSurface()
}
複製程式碼列印Canvas
離屏Canvas
Canvas座標系統
預設座標系統
變換座標系統
- 平移
- 旋轉
- 縮放
- 自定義變換方式