canvas是HTML5提供的新元素<canvas>，而svg存在的歷史要比canvas久遠(yuǎn)，已經(jīng)有十幾年了。svg并不是html5專有的標(biāo)簽，最初svg是用xml技術(shù)（超文本擴(kuò)展語(yǔ)言，可以自定義標(biāo)簽或?qū)傩裕┟枋龆S圖形的語(yǔ)言。    首先，從它們的功能上來(lái)講，canvas可以看做是一個(gè)畫(huà)布。其繪制出來(lái)的圖形為標(biāo)量圖，因此，可以在canvas中引入jpg或png這類格式的圖片，在實(shí)際開(kāi)發(fā)中，大型的網(wǎng)絡(luò)游戲都是用canvas畫(huà)布做出來(lái)的，并且canvas的技術(shù)現(xiàn)在已經(jīng)相當(dāng)?shù)某墒臁? 另外，我們喜歡用canvas來(lái)做一些統(tǒng)計(jì)用的圖表，如柱狀圖曲線圖或餅狀圖等。而svg，所繪制的圖形為矢量圖，所以其用法上受到了限制。因?yàn)橹荒芾L制矢量圖，所以svg中不能引入普通的圖片，因?yàn)槭噶繄D的不會(huì)失真的效果，在項(xiàng)目中我們會(huì)用來(lái)做一些動(dòng)態(tài)的小圖標(biāo)。  但是由于其本質(zhì)為矢量圖，可以被無(wú)限放大而不會(huì)失真，這很適合被用來(lái)做地圖，而百度地圖就是用svg技術(shù)做出來(lái)的。    另外從技術(shù)發(fā)面來(lái)講canvas里面繪制的圖形不能被引擎抓取，如我們要讓canvas里面的一個(gè)圖片跟隨鼠標(biāo)事件：canvas.onmouseover=function(){}。而svg里面的圖形可以被引擎抓取，支持事件的綁定。  另外canvas中我們繪制圖形通常是通過(guò)JavaScript來(lái)實(shí)現(xiàn)，svg更多的是通過(guò)標(biāo)簽來(lái)來(lái)實(shí)現(xiàn)，如在svg中繪制正矩形形就要用<rect>，這里我們不能用屬性style="width:XXX;height:XXX;"來(lái)定義。  我再來(lái)介紹一個(gè)svg的js庫(kù)：TWO.JS。其中包含two.js和three.js前者用于繪制二維圖形，后者用于繪制三維圖形。TWO.JS可以支持三種格式，svg（默認(rèn)）、canvas、和WEBGL。當(dāng)然也可以在普通div中引入。    要從同一圖形的一個(gè)<canvas>標(biāo)記中移除元素，需要擦掉重新繪制；而svg很容易編輯，只要從其描述中移除元素即可。    以上是之前在別人博客中看到的，所以先引用過(guò)來(lái)，待之后熟練掌握canvas，svg再寫(xiě)自己的心得體會(huì)。    具體請(qǐng)參考

1、基本語(yǔ)法

<canvas id="canvasMain" width="800" height="600" >您的瀏覽器不支持canvas</canvas>

var canvas = document.getElementById("canvasMain"),      ctx = canvas.getContext("2d");

var canvas = document.getElementById("canvasMain");  if(canvas.getContext("2d")) {      var ctx = canvas.getContext("2d");      // drawing code here  } else {      // canvas-unsupported code here  }

var canvas = document.getElementById("canvasMain");if(canvas.getContext) {//取得圖像的數(shù)據(jù)URIvar imgURI = canvas.toDataURL('image/png');//顯示圖像var image =  document.createElement('img');      image.src = imgURI;      document.body.appendChild(image);          }

var drawing = document.getElementById('drawing');if(drawing.getContext) {var context = drawing.getContext('2d');      context.strokeStyle = 'rgba(0, 0, 255, 0.5)';//描邊屬性context.fillStyle = 'pink';//填充屬性context.lineWidth = 3; //描邊線條寬度context.lineCap = 'square';//線條末端形狀（butt平頭、round圓頭、square方頭）context.lineJoin = 'round';//線條相交的方式（round圓交、bevel斜交、miter斜接）context.fillRect(10, 10, 50, 50);//填充矩形context.fillStyle = 'green';      context.fillRect(30, 30, 50, 50);      context.strokeRect(100, 10, 50, 50);//描邊矩形context.clearRect(40, 40, 15, 15);//清除畫(huà)布上的矩形區(qū)域             }

var drawing = document.getElementById('drawing');if(drawing.getContext) {/*繪制路徑*/var context = drawing.getContext('2d');              context.strokeStyle = 'pink';              context.beginPath();//開(kāi)始繪制新路徑//繪制外圓context.arc(100, 100, 99, 0, 2*Math.PI, false);//參數(shù)依次為圓心坐標(biāo)x、y、半徑、起始角度(用弧度表示)、結(jié)束角度、起始角度是否按逆時(shí)針?lè)较蛴?jì)算（flase為順時(shí)針）context.moveTo(194, 100);//將繪圖游標(biāo)移動(dòng)到（x,y）,不畫(huà)線//繪制內(nèi)圓context.arc(100, 100, 94, 0, 2*Math.PI, false);//繪制分針context.moveTo(100, 100);              context.lineTo(100, 25);//從上一點(diǎn)開(kāi)始繪制一條直線，到（x,y）為止//繪制時(shí)針context.moveTo(100, 100);              context.lineTo(35, 100);//繪制文本context.font = 'bold 14px Arial';//表示文本樣式、大小、字體context.textAlign = 'center';//文本對(duì)齊方式（start、end、left、right、center）,建議用start、end代替left、rightcontext.textBaseline = 'middle';//文本的基線(top、hanging、middle、alphabetical、ideopgraphic、bottom)context.fillText('12', 100, 20);//描邊路徑            context.stroke();//額外練習(xí)context.moveTo(230, 10);//arcTo(x1,y1,x2,y2,radius):從上一點(diǎn)開(kāi)始繪制一條弧線，到(x2,y2)為止，并以給定的半徑穿過(guò)（x1,y1）context.arcTo(280, 60, 330, 10, 50);//bezierCurveTo(c1x,c1y,c2x,c2y,x,y):從上一點(diǎn)開(kāi)始繪制一條曲線，到(x,y)為止，并以(c1x,c1y)(c2x,c2y)為控制點(diǎn)context.bezierCurveTo(210, 70, 290, 90, 300, 100);              context.moveTo(320, 10);//quadraticCurveTo(cx,cy,x,y):從上一點(diǎn)開(kāi)始繪制一條二次曲線，到(x,y)為止，并以(cx,cy)為控制點(diǎn)context.quadraticCurveTo(420, 100, 400, 10);//rect(x,y,width,height):從點(diǎn)(x,y)開(kāi)始繪制矩形，此方法繪制的是矩形路徑而不是獨(dú)立的形狀context.rect(450, 10, 50, 50);              context.stroke();  }

var drawing = document.getElementById('drawing');if(drawing.getContext) {            //變換var context = drawing.getContext('2d');              context.strokeStyle = 'rgba(0, 0, 255, 0.5)';              context.beginPath();              context.arc(100, 100, 99, 0, 2*Math.PI, false);              context.moveTo(194, 100);              context.arc(100, 100, 94, 0, 2*Math.PI, false);//變換原點(diǎn)context.translate(100, 100);//將坐標(biāo)原點(diǎn)移動(dòng)到該點(diǎn)//旋轉(zhuǎn)表針context.rotate(1);//圍繞原點(diǎn)旋轉(zhuǎn)圖像angle弧度//繪制分針context.moveTo(0, 0);              context.lineTo(0, -80);//繪制時(shí)針context.moveTo(0, 0);              context.lineTo(-65, 0);              context.stroke();                context.rotate(-1);              context.fillStyle = 'rgba(0, 0, 255, 0.5)';              context.save();//保存上下文狀態(tài)，只保存繪圖上下文的設(shè)置和變換，不會(huì)保存繪圖上下文的內(nèi)容context.fillStyle = 'pink';              context.translate(-100, -100);              context.save();              context.fillStyle = 'green';              context.fillRect(220, 10, 50, 50);                context.restore();//返回之前保存的設(shè)置context.fillRect(280, 10, 50, 50);                context.restore();              context.fillRect(340, 10, 50, 50);  }

window.onload = function(){var drawing = document.getElementById('drawing');if(drawing.getContext) {//圖像var context = drawing.getContext('2d');var image = document.images[0];//參數(shù)依次表示為：圖像元素、源圖像x坐標(biāo)、y坐標(biāo)、目標(biāo)的寬度、高度context.drawImage(image, 0, 0, 150, 250);//參數(shù)依次表示為：圖像元素、源圖像x坐標(biāo)、y坐標(biāo)、源圖像寬度、高度、目標(biāo)圖像x坐標(biāo)、y坐標(biāo)、目標(biāo)圖像寬度、高度context.drawImage(image, 100, 300, 500, 600, 0, 0, 70, 80);          }  };

window.onload = function(){var drawing = document.getElementById('drawing');if(drawing.getContext) {//陰影var context = drawing.getContext('2d');              context.shadowColor = 'rgba(0, 0, 0, 0.5)';//陰影顏色，默認(rèn)黑色context.shadowOffsetX = 5;//x軸方向的陰影偏移量，默認(rèn)0context.shadowOffsetY = 5;//y軸方向的陰影偏移量，默認(rèn)0context.shadowBlur = 4;//模糊的像素?cái)?shù)，默認(rèn)0context.fillStyle = 'rgba(0, 0, 255, 0.5)';              context.fillRect(10, 10, 50, 50);              context.fillStyle = 'pink';              context.fillRect(30, 30, 50, 50);//漸變var gradient = context.createLinearGradient(100, 10, 130, 130);//創(chuàng)建線性漸變，返回CanvasGradient對(duì)象的實(shí)例。參數(shù)：起點(diǎn)x坐標(biāo)、y坐標(biāo)、終點(diǎn)x坐標(biāo)、y坐標(biāo)gradient.addColorStop(0, 'white');//指定色標(biāo)，參數(shù)：色標(biāo)位置（0到1之間的數(shù)字，0表示開(kāi)始的顏色，1為結(jié)束的顏色）、css顏色值gradient.addColorStop(1, 'black');                context.fillStyle = gradient;              context.fillRect(100, 10, 50, 50);var createLinearGradient = function(context, x, y, width, height) {return context.createLinearGradient(x, y, x+width, y+height);              };var gradientNew = createLinearGradient(context, 180, 10, 50, 50);              gradientNew.addColorStop(0, 'red');              gradientNew.addColorStop(1, 'green');              context.fillStyle = gradientNew;              context.fillRect(180, 10, 50, 50);var gradientRound = context.createRadialGradient(275, 35, 10, 275, 35, 30);//徑向漸變,參數(shù)：起點(diǎn)圓的圓心、半徑，終點(diǎn)圓的圓心、半徑gradientRound.addColorStop(0, 'pink');              gradientRound.addColorStop(1, 'blue');              context.fillStyle = gradientRound;              context.fillRect(250, 10, 50, 50);//模式，即重復(fù)的圖像，可以用來(lái)填充或描邊圖形var image = document.images[0],                  pattern = context.createPattern(image, 'repeat-x');//創(chuàng)建新模式，參數(shù)：圖像元素、是否重復(fù)（repeat、repeat-x、repeat-y、no-repeat）context.fillStyle = pattern;              context.fillRect(350, 10, 350, 350);          }  }