svg和canvas的區(qū)別： canvas是html5新增的元素，最初的svg用的是xml技術(shù)。 canvs是標(biāo)量，可以導(dǎo)入圖片，svg則是矢量，適合做動(dòng)態(tài)小圖標(biāo)或者地圖。 與canvas不同svg的圖形可以被引擎抓取，支持事件綁定

簡(jiǎn)單的Canvas繪圖

1. 獲得 canvas 對(duì)象.

2. 調(diào)用 getContext 方法, 提供字符串參數(shù) ‘2d’.

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

4. 使用 CanvasRenderingContext2D 對(duì)象提供的方法進(jìn)行繪圖.

5. 基本繪圖命令

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

簡(jiǎn)單的svg繪圖

style設(shè)置：width:500;height:500;background:white;

viewBox:0 0 100 100 (相對(duì)坐標(biāo)原點(diǎn)(0,0),將500px映射到100個(gè)單位中)

常用的標(biāo)簽：長(zhǎng)方形：左上角坐標(biāo)、寬度高度；多邊形：經(jīng)過(guò)各點(diǎn)的坐標(biāo)；圓：圓心坐標(biāo)、半徑；橢圓：圓心坐標(biāo)、橫軸半徑、縱軸半徑；直線：端點(diǎn)坐標(biāo)、線顏色、線寬；折線：經(jīng)過(guò)點(diǎn)的坐標(biāo)、是否填充、線顏色、線寬；文字：文字內(nèi)容文字坐標(biāo)、內(nèi)容、樣式；路徑：>

動(dòng)態(tài)屬性：transform移動(dòng)，其值可以設(shè)置為translate(-10,0)向左平移10，scale(1.1)放大1.1倍,rotate(45)旋轉(zhuǎn)45度,transform-origin設(shè)置相對(duì)位置（相對(duì)于整個(gè)svg），transform-box：fill-box設(shè)置相對(duì)位置為中心（相對(duì)于當(dāng)前圖形中心）

動(dòng)畫：利用CCS實(shí)現(xiàn)動(dòng)畫效果，比如：