svg
單位和大小
顏色
fill
stoke
形狀
rect
circle
ellipse 橢圓形
line
polyline: 用來創建一系列直線連接多個點
polygon: polygon的路徑在最後一個點處自動回到第一個點,也就是自動閉合
path,因爲path功能強大，單獨拎出來
path
path元素的形狀是通過屬性d定義的，屬性d的值是一個“命令+參數”的序列，我們將講解這些可用的命令，並且展示一些示例。
<path d="M0,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
命令
大寫和小寫的區別，小寫是相對座標
M
因爲M命令僅僅是移動畫筆，但不畫線。
L x y 【line to, 畫線段】
H x 【畫水平線】
V y 【畫垂直線】
Z 閉合路徑命令
曲線命令
z演示
曲線命令
三次貝塞爾曲線C
<path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
S命令可以用來創建與前面一樣的貝塞爾曲線，但是，如果S命令跟在一個C或S命令後面，則它的第一個控制點會被假設成前一個命令曲線的第二個控制點的中心對稱點。
二次貝塞爾曲線Q
這個就是使用svg來畫圖的。
canvas
https://www.youtube.com/watch?v=EO6OkltgudE&list=PLpPnRKq7eNW3We9VdCfx9fprhqXHwTPXL
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial
顏色
ctx.fillStyle
ctx.strokeStyle
清除指定區域
clearRect，可以立即爲一塊神奇的黑板擦
消除矩形區域內的所有敵人
形狀
line
矩形
fillRect
圓形
arc(x, y, radius, startAngle, endAngle, anticlockwise)
畫一個以（x,y）爲圓心的以radius爲半徑的圓弧（圓），從startAngle開始到endAngle結束，按照anticlockwise給定的方向（默認爲順時針）來生成。
動畫
requestAnimationFrame函數