SVG使用XML描述2D圖形。canvas使用js描繪2D圖形。SVG基于XML意味著SVG DOM中每個元素都是可以用的?？梢詾槟硞€元素添加事件處理。在SVG中，每個繪制的圖形都是對象。如果SVG對象的屬性發(fā)生變化，那么瀏覽器能夠自動重現(xiàn)圖形，而canvas是逐像素進(jìn)行渲染的。在canva中一旦被繪制完成，他就不會繼續(xù)得到瀏覽器關(guān)注，如果其位置發(fā)生變化，那么整個場景也需要重新繪制，包括任何或許已經(jīng)被圖形覆蓋的對象。？？？svg可以元素級別重繪，canvas中任何一個對象發(fā)生改變所有場景重畫？？
canvas依賴分辨率，不支持事件處理，弱文本渲染，能以png、jpg保存圖像結(jié)果最適合圖像密集型的游戲，其中許多對象會被頻繁重繪？？這樣不會慢嗎？？
svg不依賴分辨率，支持時間處理，適合帶有大型渲染區(qū)域的應(yīng)用程序，如谷歌地圖，復(fù)雜度高會減慢渲染速度，任何使用dom的應(yīng)用都不快，不適合游戲？？
canvas使用
通過腳本完成？？除了js外？<canvas>本身只是圖形容器，是一個矩形，沒有邊框和內(nèi)容？？默認(rèn)有長寬嗎？一個頁面可以使用多個canvas。
<canvas id="my" width="200" height="100"
style="border:1px solid #000000;"> </canvas>沒有單位？？
var c=document.getElementById("my");
var ctx = c.getContext("2d")//返回內(nèi)建的HTML5對象
ctx.fillStyle="#FF0000";//可以是顏色 漸變 圖案等
ctx.fillReact(0,0,10,75); //起點0,0 長寬150,75
矩形
fillReact(x, y, width,height)
strokeReact(x, y, width,height)
clearReact(x, y, width,height) 清楚一部分并設(shè)為透明（其實就是清除？）
路徑：
var c= document.getElementById("my");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
beginPath() 返回存儲路徑的信息（具體是什么）
closePath（）從當(dāng)前的點到起始點閉合路徑 似乎不是必需的？
stroke（）描邊路徑
fill（）填充路徑?
lineTo(x, y)從上一個起點到（x,y）的點劃線，上一個起點可以通過moveTo來時指定，默認(rèn)為原線路經(jīng)的終點
畫圓
arc(x,y， radius,startAngle, stopAngle， anticlockwise) true為逆時針否則順時針
二次曲線quadraticCurveTo（cp1x, cp1y, x, y）
貝塞爾曲線bexierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
(cp1x, cp1y), (cp2x, cp2y)是曲線控制點，x\y是終點
使用了ink的方法，比如stroke fill？？？
var c = document.getElementById("my");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2*Math.PI);//圓心位置 x, y（向右向下為正），半徑第四個參數(shù)？？，第五個是畫的弧度？
ctx.stroke();
文本
1. var c = document.getElementById("my"),
var ctx = c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World", 10, 50);//一個canvas只能有一種字體？ 一個位置寫字？
2. var c = document.getElementById("my");
var ctx = c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World", 10, 50);//param??
漸變
createLineGradient(x,y,x1,y1) 漸變線條
createRadialGradient（x,y,r,x1,y1） 創(chuàng)建一個徑向、圓漸變
當(dāng)我們使用漸變對象，必須使用兩種或兩種以上的停止顏色， addColorStop指定顏色停止，參數(shù)使用坐標(biāo)來描述，可以是0到1
使用漸變，設(shè)置fillStyle或者strokeStyle的值為漸變，然后繪制形狀，如矩形、文本、或者一條線。使用createLineGradient。
1. var grd=c.createLineGradient(0,0,100,90);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
ctx.fillStyle = ?grid;
ctx.fillRect(10,.10.150.80);
2.var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(10, 10, 150, 80);
圖像
var img=document.getElementById("screen");
img.onload = function(){
? ctx.drawImage(img, 10,10) //起點位置 ?img 是指一定要用這種方式嗎
}
img==> var img = new Image();
img.onload = function(){
....
}
img.src="images/backdrop.png";
其他
fillStyle 填充色
stroleStyle ?描邊色
lineWidth ?線條寬度
lineCap 線條端點 butt（默認(rèn)） round square（同butt也是平的 但是會伸出來）
lineJoin 折角類型 miter（默認(rèn) 有角） bevel（截掉角上三角形） round（圓角）
miterLimit ？？？
createPattern(img, type) ?type:repeat, repeat-x，repeat-y，no-repeat
save（）
restore（）
變化
translate（x， y） 移動canvas坐標(biāo)？？
rotate（angle） 旋轉(zhuǎn)中心是canvas的坐標(biāo)原點（順勢針），translate可以移動canvas坐標(biāo)
scale（x，y）
transform（m11, m12, m21， m22，dx，dy）？？
setTransform（m11, m12, m21， m22，dx，dy）？？
globalCompositeOperation
source是要添加的圖形
destination是已在的
值有
source-over， destination-over, source-in(保留新加圖像的交錯部分, 以新加的圖像內(nèi)容保留), destination-in(保留新加圖像的交錯部分, 以已有的圖像內(nèi)容保留), source-out(新加圖像內(nèi)容未交錯部分), destination-out,(已有圖像內(nèi)容未交錯部分)，darker（全部保留，交錯部分重疊色），lighter（全部保留，交錯部分反色？）,xor(相交部分挖空)，copy（只有新加部分），source-atop(已有圖像 交錯部分顯示新加圖像)，destination-atop（新加圖像，交錯部分已有圖像）
clip剪切路徑
陰影
shadowOffsetX
shadowOffsetY
shadowBlur ，模糊度
shadowColor
SVG
可伸縮矢量圖，使用xml格式定義圖形，圖像在放大或者改變尺寸時質(zhì)量不會有損失，萬維網(wǎng)聯(lián)盟標(biāo)準(zhǔn)。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
? ? ? ?<polygon points="100,10,40,180,190,60,10,60,160,180" style="fill: lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
