前端之canvas詳解（一）——線條的各種畫法
一、什麼是canvas?
canvas是h5新增的標籤。由 HTML 程式碼配合高度和寬度屬性而定義出的可繪製區域。簡單的來說就是一塊畫布。
新增的標籤，所以它是有相容性問題的。 Mozilla 程式從 Gecko 1.8 (Firefox 1.5) 開始支援 <canvas>, Internet Explorer 從 IE9 開始 <canvas> 。Chrome 和 Opera 9+ 也支援 <canvas>
二、canvas的使用。
在html檔案的<body></body>標籤中書寫canvas標籤。並限定畫布的大小（不設寬高的話，預設寬300px，高150px），由於有一部分瀏覽器並不支援canvas標籤，所以在標籤里加入的替換的內容，當瀏覽器不顯示canvas標籤時，會有替換的內容做提示用。
<body>
<canvas id="canvas" width="300" height="300">
<span>你的瀏覽器不支援 canvas，請升級你的瀏覽器。</span>
</canvas>
</body>接著我們需要用js對canvas進行繪畫。需要先獲取canvas元素，如下：
var canvas = document.getElementById('canvas'); // 獲取canvas標籤
var ctx = canvas.getContext('2d'); // 建立內容物件
if (!canvas.getContext) return; // 畫圖判斷，如果不能畫，自動結束 getContext("2d") 物件是內建的 HTML5 物件，擁有多種繪製路徑、矩形、圓形、字元以及新增影象的方法。我們先在js檔案裡畫一條直線：
function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
if (!canvas.getContext) return;
ctx.moveTo(0,0); // 指定線的起點 ,moveTo的兩個引數依次代表x軸座標，y軸座標。
ctx.lineTo(200,100); // 指定線的下一點 ,lineTo的兩個引數依次代表x軸座標，y軸座標。
ctx.stroke(); // 把剛才的路徑以線條的方式展示出來
// 在此處可以接著畫出更多內容
}
draw() 得到如圖所示的一條斜線：
解釋一下上面的位置座標，現在我們設定的畫布寬和高都是300，（0，0）就相當於畫布的左上角，（300，300）就相當於畫布的右下角。
畫一條寬度為10的線：
function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
if (!canvas.getContext) return;
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineWidth = 10; //設定線的寬度10px;
ctx.stroke();
}
draw()設定線的端點的樣子和線條顏色：
function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
if (!canvas.getContext) return;
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.lineWidth = 10;
ctx.lineCap="round"; // 此處設定以圓形結束，"butt", "round", "square"可以自己試一試。
ctx.strokeStyle="blue" ; //設定線條的顏色，如果不設定，預設填充黑色
ctx.stroke();
}
draw()畫虛線：用 setLineDash 方法和 lineDashOffset 屬性來制定虛線樣式。 setLineDash 方法接受一個數組，來指定線段與間隙的交替；lineDashOffset屬性設定起始偏移量。
function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
if (!canvas.getContext) return;
ctx.setLineDash([20, 5]); // [實線長度, 間隙長度]
ctx.lineDashOffset = -0;
ctx.strokeRect(50, 50, 210, 210);
}
draw()畫連續兩條直線：
function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
if (!canvas.getContext) return;
ctx.moveTo(100,100);
ctx.lineTo(150,150);
ctx.lineTo(200,100);
ctx.stroke();
}
draw()畫一個三角形：
function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
if (!canvas.getContext) return;
// 第一條路徑
ctx.beginPath(); //新建一條path
ctx.moveTo(100,100);
ctx.lineTo(150,150);
ctx.lineTo(200,100);
ctx.closePath(); // 結束這條路徑。這時候會把起點和終點連線起來。
ctx.stroke();
}
draw()你會發現這次畫直線多了ctx.beginPath();ctx.closePath();這樣的話就可以自動首尾相連，成為一個閉合的圖形，當然，你直接畫一條線把首尾連線起來也可以。
可以給三角形填充顏色：
function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
if (!canvas.getContext) return;
// 第一條路徑
ctx.beginPath(); //新建一條path
ctx.moveTo(100,100);
ctx.lineTo(150,150);
ctx.lineTo(200,100);
ctx.closePath(); // 結束這條路徑。這時候會把起點和終點連線起來。
ctx.stroke();
ctx.fill(); //填充閉合區域。如果path沒有閉合，則fill()會自動閉合路徑。
}
draw()填充我們自定義顏色
function draw(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
if (!canvas.getContext) return;
// 第一條路徑
ctx.beginPath();
ctx.moveTo(0,40);
ctx.lineTo(200,40);
ctx.lineTo(200,60);
ctx.closePath();
ctx.strokeStyle="blue";
ctx.stroke();
ctx.fillStyle="red"; //設定填充的顏色，如果不設定，預設填充黑色
ctx.fill();
}
draw()本文首發今日頭條，有興趣可在頭條搜尋使用者，洛海之音