svg和canvas的區別： canvas是html5新增的元素，最初的svg用的是xml技術。 canvs是標量，可以導入圖片，svg則是矢量，適合做動態小圖標或者地圖。 與canvas不同svg的圖形可以被引擎抓取，支持事件綁定

簡單的Canvas繪圖

1. 獲得 canvas 對象.

2. 調用 getContext 方法, 提供字符串參數 ‘2d’.

3. 該方法返回 CanvasRenderingContext2D 類型的對象. 該對象提供基本的繪圖命令.

4. 使用 CanvasRenderingContext2D 對象提供的方法進行繪圖.

5. 基本繪圖命令

設置開始繪圖的位置: context.moveTo( x, y ).設置直線到的位置: context.lineTo( x, y ).畫弧線：context.arc(x0,y0,radius,startAngle,endAngle);描邊繪制: context.stroke().填充繪制: context.fill().閉合路徑: context.closePath().

簡單的svg繪圖

style設置：width:500;height:500;background:white;

viewBox:0 0 100 100 (相對坐標原點(0,0),將500px映射到100個單位中)

常用的標簽：長方形：左上角坐標、寬度高度；多邊形：經過各點的坐標；圓：圓心坐標、半徑；橢圓：圓心坐標、橫軸半徑、縱軸半徑；直線：端點坐標、線顏色、線寬；折線：經過點的坐標、是否填充、線顏色、線寬；文字：文字內容文字坐標、內容、樣式；路徑：>

動態屬性：transform移動，其值可以設置為translate(-10,0)向左平移10，scale(1.1)放大1.1倍,rotate(45)旋轉45度,transform-origin設置相對位置（相對于整個svg），transform-box：fill-box設置相對位置為中心（相對于當前圖形中心）

動畫：利用CCS實現動畫效果，比如：