摘要：在前端頁面開發過程中偶爾會有需要對數據進行相應的數學模型展示，或者地理位置的動態展示，可能就會想到用，網上有很多已經集成好的，比如說類似確實功能非常強大，而且用到了，所以對的使用研究了以下，做一下總結，方便復習。

在前端頁面開發過程中偶爾會有需要對數據進行相應的數學模型展示，或者地理位置的動態展示，可能就會想到用canvas，網上有很多已經集成好的，比如說類似echarts,確實功能非常強大，而且用到了canvas，所以對canvas的使用研究了以下，做一下總結，方便復習。
1.利用canvas畫一條線：
首先，在頁面定義一個canvas標簽

然后js中開始繪制

var line = document.getElementById("line");
if(line.getContext){
    var lineCtx = line.getContext("2d");
    lineCtx.moveTo(50,50);
    lineCtx.lineTo(150,150);
    lineCtx.stroke();
}

首先找到需要繪制圖像的畫布元素，然后if判斷瀏覽器是否支持canvas，支持以后，就開始繪制，畫一條線的步驟非常簡單，定義起始位置坐標后，stroke()函數，繪制；

2.利用canvas畫一個矩形：

var rect = document.getElementById("rect");
if(rect.getContext){
    var rectCtx = rect.getContext("2d");
    rectCtx.fillStyle = "#7068D6";
    rectCtx.fillRect(50,50,100,100);
}

fillStyle用來填充矩形的顏色，fillRect(x,y,width,height)填充矩形;

3.利用canvas來繪制圓形：

var circle = document.getElementById("circle");
if(circle.getContext){
    var circleCtx = circle.getContext("2d");
    circleCtx.beginPath();
    circleCtx.arc(100,100,50,0,2*Math.PI);
    circleCtx.stroke();
}

繪制圓形跟矩形有點區別，需要先beginPath(),然后利用arc(圓心x軸坐標，圓心y軸坐標，半徑長度，起始度數，結束度數)，圓形繪制時是順時針開始，所以如果想繪制弧形，要知道怎么弄。

4.繪制文字：

var txt = document.getElementById("txt");
if(txt.getContext){
    var txtCtx = txt.getContext("2d");
    txtCtx.font = "30px Arial";
    txtCtx.fillText("hi,luhan",50,50);
    txtCtx.strokeText("hi.luhan",50,100);
}

繪制文字有幾個參數可以設置，font、fillText(‘要繪制的文字’,x,y),注意fillText是填充文字，所以繪制出來的是實心文字，strokeText(‘要繪制的文字’,x,y)繪制的是空心文字；

5.結合以上幾種繪圖方式，繪制一個笑臉：

var canvas = document.getElementById("canvas");
if(canvas.getContext){
    var mapCtx = canvas.getContext("2d");
    mapCtx.beginPath();
    mapCtx.arc(75, 75, 50, 0, Math.PI * 2, true);
    mapCtx.moveTo(110, 75);
    mapCtx.arc(75, 75, 35, 0, Math.PI, false);
    mapCtx.moveTo(65, 65);
    mapCtx.arc(60, 65, 5, 0, Math.PI * 2, true);
    mapCtx.moveTo(95, 65);
    mapCtx.arc(90, 65, 5, 0, Math.PI * 2, true);
    mapCtx.stroke();
}

6.利用canvas繪制靜態圖片：

var img = document.getElementById("img");
if(img.getContext){
    var imgCtx = img.getContext("2d");
    var imgEl = new Image();
    imgEl.src = "img/headPic.jpg";
    imgEl.onload = function(){
    imgCtx.drawImage(imgEl,10,10,100,100);
    }
}

等待圖片資源加載完畢，開始繪制drawImage(圖片元素,x,y,width,height);

以上就是對canvas繪制各種圖形的總結，如果想繪制復雜的圖形，可能就需要用集成好的組件更方便，數據轉圖形類的推薦echarts,官方實例超多，echarts實例展示
如果想要酷炫動畫，推薦17素材網站
最后，在前端開發過程中，如果只是需要某一部分的實現需要canvas，就可以直接用網上大家集成好的，基本原理懂了，如果用的過程中有什么問題也是能猜個大概，不必浪費太多時間。