`<canvas>`標簽定義圖形，比如圖表和其他圖像，必須使用腳本來繪制圖形。如圖所示，在畫布（Canvas）上畫一個紅色矩形、漸變矩形、彩色 矩形和一些彩色的文字。
一個畫布在網頁中是一個矩形框，通過 `<canvas>`元素來繪制。
案例：創建一個畫布 (`Canvas`)
代碼清單：
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border: 1px solid #000000;">
您的瀏覽器不支持 HTML5 canvas 標簽。
</canvas>
</body>
</html>
```
默認情況下`<canvas>`元素沒有邊框和內容，可以使用 `style` 屬性來添加邊框。標簽通常需要指定一個 id 屬性（腳本中經常引用），width 和 height 屬性定義畫布 的大小。
>可以在 HTML 頁面中使用多個 `<canvas>` 元素。
程序運行效果如下圖所示：
- Canvas基本功能
- 繪制方法
- （一）Canvas標簽
- 定義Canvas標簽
- 理解Canvas坐標系
- 獲取Canvas環境上下文
- （二）Canvas圖形
- 繪制Canvas路徑
- 1、繪制線條
- 案例1：繪制直線
- 案例2：繪制圓形的結束線帽
- 案例3：繪制復雜圓形
- 2、繪制矩形
- 案例1：rect()與stroke()繪制矩形
- 案例2：fillRect()繪制矩形
- 3、繪制圓形
- 案例1
- 案例2
- 4、繪制貝塞爾曲線
- 案例1：貝塞爾曲線方式1
- 案例2：貝塞爾曲線方式2
- 案例3:復雜的貝塞爾曲線
- 繪制Canvas變形圖形
- 處理Canvas圖形
- （三）Canvas文本
- 繪制文字
- 設置文字格式
- 設置文字對齊方式
- （四）Canvas圖片
- 繪制drawImage圖片
- 使用getImageData()和putImageData()繪制圖片
- 使用createImageData新建像素
- 參考文章
- API官網
- 示例