小編給大家分享一下canvas與svg的區(qū)別 有哪些，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

四子王網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián),四子王網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為四子王數(shù)千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的四子王做網(wǎng)站的公司定做！

canvas（畫布）是html5新增的標(biāo)簽元素，用來定義圖形，比如圖表和其他圖像。標(biāo)簽只是圖形容器，必須使用腳本（通常為javascript）來繪制圖形。

canvas與svg的區(qū)別 

canvas是HTML5提供的新元素，而svg存在的歷史要比canvas久遠(yuǎn)，已經(jīng)有十幾年了。svg并不是html5專有的標(biāo)簽，最初svg是用xml技術(shù)（超文本擴(kuò)展語言，可以自定義標(biāo)簽或?qū)傩裕┟枋龆S圖形的語言。

首先，從它們的功能上來講，canvas可以看做是一個(gè)畫布。其繪制出來的圖形為標(biāo)量圖，因此，可以在canvas中引入jpg或png這類格式的圖片，在實(shí)際開發(fā)中，大型的網(wǎng)絡(luò)游戲都是用canvas畫布做出來的，并且canvas的技術(shù)現(xiàn)在已經(jīng)相當(dāng)?shù)某墒臁?
另外，我們喜歡用canvas來做一些統(tǒng)計(jì)用的圖表，如柱狀圖曲線圖或餅狀圖等。而svg，所繪制的圖形為矢量圖，所以其用法上受到了限制。因?yàn)橹荒芾L制矢量圖，所以svg中不能引入普通的圖片，因?yàn)槭噶繄D的不會(huì)失真的效果，在項(xiàng)目中我們會(huì)用來做一些動(dòng)態(tài)的小圖標(biāo)。
但是由于其本質(zhì)為矢量圖，可以被無限放大而不會(huì)失真，這很適合被用來做地圖，而百度地圖就是用svg技術(shù)做出來的。

另外從技術(shù)發(fā)面來講canvas里面繪制的圖形不能被引擎抓取，如我們要讓canvas里面的一個(gè)圖片跟隨鼠標(biāo)事件：canvas.onmouseover=function(){}。而svg里面的圖形可以被引擎抓取，支持事件的綁定。
另外canvas中我們繪制圖形通常是通過JavaScript來實(shí)現(xiàn)，svg更多的是通過標(biāo)簽來來實(shí)現(xiàn)，如在svg中繪制正矩形形就要用，這里我們不能用屬性style="width:XXX;height:XXX;"來定義。
我再來介紹一個(gè)svg的js庫(kù)：TWO.JS。其中包含two.js和three.js前者用于繪制二維圖形，后者用于繪制三維圖形。TWO.JS可以支持三種格式，svg（默認(rèn)）、canvas、和WEBGL。當(dāng)然也可以在普通div中引入。

要從同一圖形的一個(gè)標(biāo)記中移除元素，需要擦掉重新繪制；而svg很容易編輯，只要從其描述中移除元素即可。

以上是之前在別人博客中看到的，所以先引用過來，待之后熟練掌握canvas，svg再寫自己的心得體會(huì)。

具體請(qǐng)參考

1、基本語法

您的瀏覽器不支持canvas

當(dāng)沒有設(shè)置寬度和高度的時(shí)候，canvas會(huì)初始化寬度為300px和高度為150px；當(dāng)瀏覽器不支持canvas標(biāo)簽的時(shí)候，會(huì)顯示其中的文字。

在canvas坐標(biāo)體系中，以左上角為坐標(biāo)原點(diǎn)，向右為x軸正方向，向下為y軸正方向，如下圖：

進(jìn)行繪制需要獲取canvas的上下文環(huán)境context，之后調(diào)用API進(jìn)行圖像繪制

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

替換內(nèi)容是在不支持標(biāo)簽的瀏覽器中展示的。也可以通過檢測(cè)getContext()方法的存在來判斷是否支持（有些瀏覽器會(huì)為html規(guī)范之外的元素創(chuàng)建默認(rèn)的html元素對(duì)象）

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

導(dǎo)出在元素上繪制的圖像，接收一個(gè)參數(shù)，即圖像的MIME類型格式。若繪制到畫布上的圖像來自不同域，該方法會(huì)報(bào)錯(cuò)

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);        
}

2、2D上下文

• 填充和描邊

　　填充：用指定的樣式（顏色、漸變、圖像）填充圖形；描邊：在圖形的邊緣畫線   兩個(gè)屬性分別是fillStyle  strokeStyle，屬性的值可以是字符串、漸變對(duì)象或模式對(duì)象

• 繪制矩形

繪制矩形方法：fillRect()  strokeRect()   clearRect()  參數(shù)依次為：矩形x坐標(biāo)、y坐標(biāo)、寬度、高度

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);//清除畫布上的矩形區(qū)域             }

• 繪制路徑

closePath()繪制一條連接到路徑起點(diǎn)的線條

fill()填充路徑    stroke()描邊路徑   clip()在路徑上創(chuàng)建一個(gè)剪切區(qū)域

isPointInPath(x,y)判斷畫布上的某一點(diǎn)是否位于路徑上

var drawing = document.getElementById('drawing');if(drawing.getContext) {/*繪制路徑*/var context = drawing.getContext('2d');
            context.strokeStyle = 'pink';
            context.beginPath();//開始繪制新路徑//繪制外圓context.arc(100, 100, 99, 0, 2*Math.PI, false);//參數(shù)依次為圓心坐標(biāo)x、y、半徑、起始角度(用弧度表示)、結(jié)束角度、起始角度是否按逆時(shí)針方向計(jì)算（flase為順時(shí)針）context.moveTo(194, 100);//將繪圖游標(biāo)移動(dòng)到（x,y）,不畫線//繪制內(nèi)圓context.arc(100, 100, 94, 0, 2*Math.PI, false);//繪制分針context.moveTo(100, 100);
            context.lineTo(100, 25);//從上一點(diǎn)開始繪制一條直線，到（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)開始繪制一條弧線，到(x2,y2)為止，并以給定的半徑穿過（x1,y1）context.arcTo(280, 60, 330, 10, 50);//bezierCurveTo(c1x,c1y,c2x,c2y,x,y):從上一點(diǎn)開始繪制一條曲線，到(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)開始繪制一條二次曲線，到(x,y)為止，并以(cx,cy)為控制點(diǎn)context.quadraticCurveTo(420, 100, 400, 10);//rect(x,y,width,height):從點(diǎn)(x,y)開始繪制矩形，此方法繪制的是矩形路徑而不是獨(dú)立的形狀context.rect(450, 10, 50, 50);
            context.stroke();
}

• 繪制文本

　　fillText()繪制文本    strokeText()為文本描邊    參數(shù)：文本字符串、x坐標(biāo)、y坐標(biāo)、可選的最大像素寬度

• 變換

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);
}

• 繪制圖像

　　drawImage()還可傳入元素作為第一個(gè)參數(shù)，表示把另一個(gè)畫布內(nèi)容繪制到當(dāng)前畫布上。

可能遇到的問題：drawImage()圖片不顯示在畫布上，原因可能是你取圖片的時(shí)候，此時(shí)圖片還沒有加載出來

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);
        }
};

• 陰影、漸變、模式

模式與漸變一樣，都是從畫布原點(diǎn)（0,0）開始的，將填充樣式設(shè)置為模式對(duì)象，只表示在某個(gè)特定區(qū)域內(nèi)顯示重復(fù)的圖像，而不是從某個(gè)位置開始繪制重復(fù)的圖像。

createPattern（）第一個(gè)參數(shù)也可以是

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表示開始的顏色，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ù)的圖像，可以用來填充或描邊圖形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);
        }
}

• 使用圖像數(shù)據(jù)

getImageData()可取得原始圖像數(shù)據(jù)，參數(shù)：要取得數(shù)據(jù)的畫面區(qū)域的x坐標(biāo)、y坐標(biāo)、寬度、高度。返回的對(duì)象是ImageData的實(shí)例，該對(duì)象有3個(gè)屬性：width、height和data。其中data為數(shù)組，保存著圖像中

每一個(gè)像素的數(shù)據(jù)，每一個(gè)像素用4個(gè)元素來表示，分別表示紅、綠、藍(lán)和透明度值。因此，第一個(gè)像素的數(shù)據(jù)保存在數(shù)組的第0到第3個(gè)元素中。

注意：只有在畫布“干凈”的情況下（即圖像并非來自其他域），才可以取得圖像數(shù)據(jù)。

• 合成

　　globalAlpha：介于0和1之間的值（包括0和1），用于指定透明度，默認(rèn)為0。

globalComositionOperation：表示后繪制的圖形怎樣與先繪制的圖形結(jié)合。

3、WebGL

　　WebGL是針對(duì)canvas的3D上下文，并不是由W3C制定的標(biāo)準(zhǔn)。

canvas作為H5一個(gè)重要的新特性，大家需要花點(diǎn)精力去學(xué)習(xí)使用它。

以上是“canvas與svg的區(qū)別 有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！