簡單初步：

1.創建CANVAS畫布
2.引入繪畫腳本
3.使用draw函數進行繪畫

<h3>創建畫布</h3>

canvas畫布創建

<h3>繪制矩形</h3>

1.獲取canvas元素
2.取得上下文
3.填充與繪制邊框
4.設置繪制樣式
5.指定畫筆寬度
6.設置顏色值
7.繪制矩形

canvas繪制方法

canvas繪制樣式

設置畫筆寬度

設置顏色值

繪制矩形

<h2>繪制圖形</h2>

canvas元素本身是沒有繪圖能力的，必須要在JavaScript下完成
參考文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D

繪制矩形

繪制矩形

<h2>繪制圖片</h2>

繪制圖形

<h2>HTML5使用路徑</h2>

canvas路徑

繪制圓形

filltext

text

text

水平對其方式

保存圖片

保存為圖片

setInterval

<h3>制作簡單動畫</h3>
1.使用setInterval設置動畫的間隔時間

1.setInterval(code,millisec)
第一個函數表示執行動畫的函數，第二個參數表示時間間隔
2.使用擦除圖形繪圖clearRect方法：
context.fillRect(x,y,width,height);
x為地點橫坐標，y為起點縱坐標，width為擦子的長度，height為擦子高度