初識canvas和svg | 使用場景及兩者的區別

這是我參與8月更文挑戰的第9天，活動詳情查看：8月更文挑戰css

背景

在平常工做和學習中咱們確定或多或少的接觸到過對圖片的的處理，咱們通常狀況下使用img標籤就能解決咱們大部分的需求，但還有更高級的對圖片的處理，也就是畫出來。html

canvas是什麼

canvas是H5中新增的標籤，官方解釋說canvas是一塊畫布，能夠在網頁中繪製圖像，話很少說，來個例子canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
        在使用canvas時候，不可用css來定義canvas的寬度
        由於當畫布縮放的同時，內部的圖像也會隨之縮放，這是就會出現圖像失真的狀況
        */
        canvas{
            background-color: #aaa;
        }
    </style>
</head>
<body>
    <canvas width="500" height="500">瀏覽器不支持canvas</canvas> //這就是canvas標籤，當瀏覽器不支持canvas標籤的時候就會在瀏覽器展現出瀏覽器不支持canvas這段話
    <script>
        var canvas = document.querySelector("canvas")
        //繪圖環境
        var ctx = canvas.getContext("2d")
        function img(){
            //ctx.drawImage(圖像對象，座標，寬高)
            var imgObj = new Image() //new一個圖像對象
            imgObj.src="./img.jpg"
            //在這裏要注意，一點要在imgObj.onload內部再使用ctx.drawImage,不然會畫圖失敗
            imgObj.onload = function (){
                ctx.drawImage(imgObj,100,100,300,300)
            }
            // ctx.drawImage(imgObj,100,100,300,300)
        }
        img()
    </script>
</body>
</html>
複製代碼

什麼svg

svg便可縮放矢量圖形，什麼是矢量圖形呢，也就是放大或者縮小不會失真的圖形。 svg繪圖時，每一個圖形都是以DOM節點的形式插入到頁面中的，咱們能夠經過js來直接操做這些圖形瀏覽器

canvas和svg的區別

canvas繪畫出來的圖形通常成爲位圖，也就是放大縮小的狀況下會出現失真的狀況，svg繪製的圖形是矢量圖，不存在失真的狀況
canvas繪製的圖形不會出如今DOM結構中，svg繪製的會存在於DOM結構
canvas相似於動畫，每次圖形的改變都是先清除原來的圖形，而後把新的圖形畫上去，svg則是能夠直接經過js來進行某些操做
canvas依賴於分辨率，svg不依賴分辨率
canvas最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪，svg不適合遊戲應用

總結

svg已經出來十幾年了，canvas剛出來沒多久，勢頭正猛，canvas的出現讓開發人員能夠在網頁上繪製圖形，合成製做圖片，製做複雜一些的動畫。markdown