canvas與svg的區(qū)別 有哪些

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

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

canvas與svg的區(qū)別  

canvas是HTML5提供的新元素<canvas>，而svg存在的歷史要比canvas久遠，已經有十幾年了。svg并不是html5專有的標簽，最初svg是用xml技術（超文本擴展語言，可以自定義標簽或屬性）描述二維圖形的語言。

首先，從它們的功能上來講，canvas可以看做是一個畫布。其繪制出來的圖形為標量圖，因此，可以在canvas中引入jpg或png這類格式的圖片，在實際開發(fā)中，大型的網絡游戲都是用canvas畫布做出來的，并且canvas的技術現在已經相當的成熟。
另外，我們喜歡用canvas來做一些統計用的圖表，如柱狀圖曲線圖或餅狀圖等。而svg，所繪制的圖形為矢量圖，所以其用法上受到了限制。因為只能繪制矢量圖，所以svg中不能引入普通的圖片，因為矢量圖的不會失真的效果，在項目中我們會用來做一些動態(tài)的小圖標。
但是由于其本質為矢量圖，可以被無限放大而不會失真，這很適合被用來做地圖，而百度地圖就是用svg技術做出來的。

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

要從同一圖形的一個<canvas>標記中移除元素，需要擦掉重新繪制；而svg很容易編輯，只要從其描述中移除元素即可。

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

具體請參考

1、基本語法

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

當沒有設置寬度和高度的時候，canvas會初始化寬度為300px和高度為150px；當瀏覽器不支持canvas標簽的時候，會顯示其中的文字。

在canvas坐標體系中，以左上角為坐標原點，向右為x軸正方向，向下為y軸正方向，如下圖：

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

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

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

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

導出在<canvas>元素上繪制的圖像，接收一個參數，即圖像的MIME類型格式。若繪制到畫布上的圖像來自不同域，該方法會報錯

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

2、2D上下文

• 填充和描邊

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

• 繪制矩形

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

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()繪制一條連接到路徑起點的線條

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

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

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);//參數依次為圓心坐標x、y、半徑、起始角度(用弧度表示)、結束角度、起始角度是否按逆時針方向計算（flase為順時針）context.moveTo(194, 100);//將繪圖游標移動到（x,y）,不畫線//繪制內圓context.arc(100, 100, 94, 0, 2*Math.PI, false);//繪制分針context.moveTo(100, 100);
            context.lineTo(100, 25);//從上一點開始繪制一條直線，到（x,y）為止//繪制時針context.moveTo(100, 100);
            context.lineTo(35, 100);//繪制文本context.font = 'bold 14px Arial';//表示文本樣式、大小、字體context.textAlign = 'center';//文本對齊方式（start、end、left、right、center）,建議用start、end代替left、rightcontext.textBaseline = 'middle';//文本的基線(top、hanging、middle、alphabetical、ideopgraphic、bottom)context.fillText('12', 100, 20);//描邊路徑            context.stroke();//額外練習context.moveTo(230, 10);//arcTo(x1,y1,x2,y2,radius):從上一點開始繪制一條弧線，到(x2,y2)為止，并以給定的半徑穿過（x1,y1）context.arcTo(280, 60, 330, 10, 50);//bezierCurveTo(c1x,c1y,c2x,c2y,x,y):從上一點開始繪制一條曲線，到(x,y)為止，并以(c1x,c1y)(c2x,c2y)為控制點context.bezierCurveTo(210, 70, 290, 90, 300, 100);
            context.moveTo(320, 10);//quadraticCurveTo(cx,cy,x,y):從上一點開始繪制一條二次曲線，到(x,y)為止，并以(cx,cy)為控制點context.quadraticCurveTo(420, 100, 400, 10);//rect(x,y,width,height):從點(x,y)開始繪制矩形，此方法繪制的是矩形路徑而不是獨立的形狀context.rect(450, 10, 50, 50);
            context.stroke();
}

• 繪制文本

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

• 變換

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);//變換原點context.translate(100, 100);//將坐標原點移動到該點//旋轉表針context.rotate(1);//圍繞原點旋轉圖像angle弧度//繪制分針context.moveTo(0, 0);
            context.lineTo(0, -80);//繪制時針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)，只保存繪圖上下文的設置和變換，不會保存繪圖上下文的內容context.fillStyle = 'pink';
            context.translate(-100, -100);
            context.save();
            context.fillStyle = 'green';
            context.fillRect(220, 10, 50, 50);

            context.restore();//返回之前保存的設置context.fillRect(280, 10, 50, 50);

            context.restore();
            context.fillRect(340, 10, 50, 50);
}

• 繪制圖像

　　drawImage()還可傳入<canvas>元素作為第一個參數，表示把另一個畫布內容繪制到當前畫布上。

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

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

• 陰影、漸變、模式

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

　　 createPattern（）第一個參數也可以是<video>元素，或者是另一個<canvas>元素

window.onload = function(){var drawing = document.getElementById('drawing');if(drawing.getContext) {//陰影var context = drawing.getContext('2d');
            context.shadowColor = 'rgba(0, 0, 0, 0.5)';//陰影顏色，默認黑色context.shadowOffsetX = 5;//x軸方向的陰影偏移量，默認0context.shadowOffsetY = 5;//y軸方向的陰影偏移量，默認0context.shadowBlur = 4;//模糊的像素數，默認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對象的實例。參數：起點x坐標、y坐標、終點x坐標、y坐標gradient.addColorStop(0, 'white');//指定色標，參數：色標位置（0到1之間的數字，0表示開始的顏色，1為結束的顏色）、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);//徑向漸變,參數：起點圓的圓心、半徑，終點圓的圓心、半徑gradientRound.addColorStop(0, 'pink');
            gradientRound.addColorStop(1, 'blue');
            context.fillStyle = gradientRound;
            context.fillRect(250, 10, 50, 50);//模式，即重復的圖像，可以用來填充或描邊圖形var image = document.images[0],
                pattern = context.createPattern(image, 'repeat-x');//創(chuàng)建新模式，參數：圖像元素、是否重復（repeat、repeat-x、repeat-y、no-repeat）context.fillStyle = pattern;
            context.fillRect(350, 10, 350, 350);
        }
}

• 使用圖像數據

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

每一個像素的數據，每一個像素用4個元素來表示，分別表示紅、綠、藍和透明度值。因此，第一個像素的數據保存在數組的第0到第3個元素中。

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

• 合成

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

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

3、WebGL

　　WebGL是針對canvas的3D上下文，并不是由W3C制定的標準。

canvas作為H5一個重要的新特性，大家需要花點精力去學習使用它。

以上是“canvas與svg的區(qū)別 有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！