<canvas></canvas>是HTML5中新增的標(biāo)簽，用于繪制圖形，這篇文章主要為大家詳細(xì)介紹了HTML5 canvas基本繪圖之繪制線條方法，感興趣的小伙伴們可以參考一下

<canvas></canvas>是HTML5中新增的標(biāo)簽，用于繪制圖形，實(shí)際上，這個(gè)標(biāo)簽和其他的標(biāo)簽一樣，其特殊之處在于該標(biāo)簽可以獲取一個(gè)CanvasRenderingContext2D對(duì)象，我們可以通過(guò)JavaScript腳本來(lái)控制該對(duì)象進(jìn)行繪圖。

<canvas></canvas>只是一個(gè)繪制圖形的容器，除了id、class、style等屬性外，還有height和width屬性。在<canvas>>元素上繪圖主要有三步：

1.獲取<canvas>元素對(duì)應(yīng)的DOM對(duì)象，這是一個(gè)Canvas對(duì)象；

2.調(diào)用Canvas對(duì)象的getContext()方法，得到一個(gè)CanvasRenderingContext2D對(duì)象；

3.調(diào)用CanvasRenderingContext2D對(duì)象進(jìn)行繪圖。

線條屬性

除了上面用到的lineWidth屬性，線條還有以下幾個(gè)屬性：

 •lineCap 屬性設(shè)置或返回線條末端線帽的樣式，可以取以下幾個(gè)值： 

“butt” 向線條的每個(gè)末端添加平直的邊緣（默認(rèn)）； 

“round” 向線條的每個(gè)末端添加圓形線帽； 

“square” 向線條的每個(gè)末端添加正方形線帽。

 •lineJoin 屬性當(dāng)兩條線交匯時(shí)設(shè)置或返回所創(chuàng)建邊角的類型，可以取以下幾個(gè)值： 

“miter” 創(chuàng)建尖角(默認(rèn))； 

“bevel” 創(chuàng)建斜角； 

“round” 創(chuàng)建圓角。

 •miterLimit 屬性設(shè)置或返回最大斜接長(zhǎng)度（默認(rèn)為10）。斜接長(zhǎng)度指的是在兩條線交匯處內(nèi)角和外角之間的距離。只有當(dāng) lineJoin 屬性為 “miter” 時(shí)，miterLimit 才有效。 

JavaScript Code復(fù)制內(nèi)容到剪貼板

var canvas = document.getElementById("canvas");   

    var context = canvas.getContext("2d");   

    //測(cè)試lineCap屬性   

    //設(shè)置基準(zhǔn)線便于觀察   

    context.moveTo(10,10);   

    context.lineTo(10,200);   

    context.moveTo(200,10);   

    context.lineTo(200,200);   

    context.lineWidth="1";   

    context.stroke();   

    //butt   

    context.beginPath();   

    context.moveTo(10,50);   

    context.lineTo(200,50);   

    context.lineCap="butt";   

    context.lineWidth="10";   

    context.stroke();   

    //round   

    context.beginPath();   

    context.moveTo(10,100);   

    context.lineTo(200,100);   

    context.lineCap="round";   

    context.lineWidth="10";   

    context.stroke();   

    //square   

    context.beginPath();   

    context.moveTo(10,150);   

    context.lineTo(200,150);   

    context.lineCap="square";   

    context.lineWidth="10";   

    context.stroke();   

    //測(cè)試linJoin屬性   

    //miter   

    context.beginPath();   

    context.moveTo(300,50);   

    context.lineTo(450,100);   

    context.lineTo(300,150);   

    context.lineJoin="miter";   

    context.lineWidth="10";   

    context.stroke();   

    //round   

    context.beginPath();   

    context.moveTo(400,50);   

    context.lineTo(550,100);   

    context.lineTo(400,150);   

    context.lineJoin="round";   

    context.lineWidth="10";   

    context.stroke();   

    //square   

    context.beginPath();   

    context.moveTo(500,50);   

    context.lineTo(650,100);   

    context.lineTo(500,150);   

    context.lineJoin="bevel";   

    context.lineWidth="10";   

    context.stroke();   

    //測(cè)試miterLimit屬性   

    context.beginPath();   

    context.moveTo(700,50);   

    context.lineTo(850,100);   

    context.lineTo(700,150);   

    context.lineJoin="miter";   

    context.miterLimit="2";   

    context.lineWidth="10";   

    context.strokeStyle="#2913EC";   

    context.stroke();   

各屬性的不同取值的效果如下：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助