```
容器：
<div style="width: 800px;margin:0 auto">
<canvas id="test" width="700" height="1200"></canvas>
</div>
```
```
獲取canvas
const cnv = document.getElementById('test')
const cxt = cnv.getContext('2d')
```
1.繪制橫線（實線或虛線）
```
// 橫線
cxt.moveTo(20, 100)//起點
cxt.lineTo(200, 100)//終點
cxt.lineWidth = 10//線寬
cxt.strokeStyle = 'red'//描邊填充顏色
cxt.lineCap = "round" //兩端樣式
// cxt.setLineDash([5,10,...])//設置虛線：數組：對應 實線-空白的距離
cxt.stroke()//連接起點和終點
```
2.設置拐角樣式
```
cxt.beginPath()// 重新開啟一個路徑
cxt.moveTo(20, 120)//起點
cxt.lineTo(120, 120)
cxt.lineTo(120, 150)//終點
cxt.lineJoin = 'round'//拐角樣式，可選：bevel（尖角），round（圓角），miter（默認）
cxt.lineWidth = 5//線寬
cxt.strokeStyle = 'green'//描邊填充顏色
cxt.lineCap = "square" //兩端樣式
cxt.stroke()//連接起點和終點
```
3.折線
```
// 折線，通過每個點的坐標連接
cxt.beginPath()// 重新開啟一個路徑
cxt.strokeStyle = 'pink'//描邊填充顏色
cxt.moveTo(250, 200)
cxt.lineTo(300, 250)
cxt.lineTo(350, 200)
cxt.lineTo(400, 250)
cxt.stroke()//連接起點和終點
```
4.矩形
```
// 矩形
// strokeRect(x, y, width, height) 方法
cxt.strokeStyle = 'pink'
cxt.strokeRect(50, 50, 200, 100)//長方形
cxt.strokeStyle = 'blue'
cxt.strokeRect(150, 200, 50, 50)//正方形
//顏色填充
cxt.fillStyle = 'pink'
cxt.fillRect(50, 250, 200, 100)
// cxt.clearRect(50, 50, 200, 100) // 清空矩形
```
5.多邊形
```
// 多邊形：cxt.closePath()閉合起始點，如：繪制一個三角形
cxt.beginPath()// 重新開啟一個路徑
cxt.strokeStyle = 'yellow'//描邊填充顏色
cxt.lineWidth = 2
cxt.moveTo(50, 400)
cxt.lineTo(100, 450)
cxt.lineTo(50, 500)
cxt.closePath()
cxt.stroke()//連接起點和終點
```
6.圓
```
// 圓：
//方法：arc(x, y, r, sAngle, eAngle，counterclockwise)
// x 和 y: 圓心坐標
// r: 半徑
// sAngle: 開始角度：都是以弧度為單位。例如 180°就寫成 Math.PI ，360°寫成 Math.PI * 2
// eAngle: 結束角度
// counterclockwise: 繪制方向（true: 逆時針; false: 順時針），默認 false
cxt.beginPath();//繪制圓之前必須調用重新開始方法
cxt.strokeStyle = 'skyBlue'//描邊填充顏色
cxt.arc(200, 450, 80, 0, 360 * Math.PI / 180)
// cxt.arc(200, 450, 80, 0, 180 * Math.PI / 180 ,true)//半圓且朝上
cxt.closePath();//結束必須調用閉合
cxt.stroke()
```
7.圓弧
```
// 圓弧：就是圓不閉合
cxt.beginPath();//繪制圓之前必須調用重新開始方法
cxt.strokeStyle = 'skyBlue'//描邊填充顏色
cxt.arc(260, 450, 80, 0, 30 * Math.PI / 180)//繪制一個30°的圓弧
cxt.stroke()
```
8.設置字體
```
// cxt.font = 'font-style font-variant font-weight font-size/line-height font-family'
cxt.font = '60px Arial'
cxt.strokeStyle = "orange"
cxt.strokeText('hello111', 500, 90)//描邊方法：設置文本，位置：x，y
cxt.textAlign = 'center'//文本水平對齊方式
cxt.textBaseline = 'middle'//文本垂直對齊方式
cxt.fillStyle = 'yellow'//填充顏色
cxt.fillText('hello', 400, 90)//填充方法：設置文本
```
9.圖片渲染
```
// 渲染圖片的方式有兩種，一種是在JS里加載圖片再渲染，另一種是把DOM里的圖片拿到 canvas 里渲染。
// JS渲染方式：1.創建 Image 對象 2.引入圖片 3.等待圖片加載完成 4.使用 drawImage() 方法渲染圖片
const image = new Image()//實例化圖片對象
image.src = './favicon .png'//引入圖片
// 加載完成
image.onload = () => {
cxt.drawImage(image, 10, 20, 50, 50)//drawImage():三個參數：圖片對象，左上角x坐標，左上角y坐標，寬，高
}
// dom渲染
window.onload = () => {
const image1 = document.getElementById('img')//獲取圖片對象
cxt.drawImage(image1, 400, 170, 50, 80)
}
```
10.截取圖片
```
// 截取圖片：drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
// image: 圖片對象 sx: 開始截取的橫坐標 sy: 開始截取的縱坐標 sw: 截取的寬度 sh: 截取的高度
// dx: 圖片左上角的橫坐標位置 dy: 圖片左上角的縱坐標位置 dw: 圖片寬度 dh: 圖片高度
// 截取時：參數缺一不可
// image.onload = () => {
// cxt.drawImage(image, 10, 10, 10, 10, 30, 30, 20, 20)
// }
```
