html5新特性canvas繪製圖像

在前端頁面開發過程當中偶爾會有須要對數據進行相應的數學模型展現，或者地理位置的動態展現，可能就會想到用canvas，網上有不少已經集成好的，好比說相似echarts,確實功能很是強大，並且用到了canvas，因此對canvas的使用研究瞭如下，作一下總結，方便複習。
1.利用canvas畫一條線：
首先，在頁面定義一個canvas標籤

<canvas id="line" width="200" height="200"></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畫一個矩形：

<canvas id="rect" width="200" height="200"></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來繪製圓形：

<canvas id="circle" width="200" height="200"></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.繪製文字：

<canvas id="txt" width="200" height="200"></canvas>

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.結合以上幾種繪圖方式，繪製一個笑臉：

<canvas id="canvas" width="200" height="200"></canvas>

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繪製靜態圖片：

<canvas id="img" width="200" height="200"></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，就能夠直接用網上你們集成好的，基本原理懂了，若是用的過程當中有什麼問題也是能猜個大概，沒必要浪費太多時間。