HTML5現(xiàn)在是時下較火的編程語言之一，但是對于怎么學習很多朋友都是不了解的，不知道從何處下手，針對以上內(nèi)容小猿圈web前端講師每天會分享一個web前端知識，希望對你的前端學習有一定的幫助，今天分享的是canvas繪制線段方法。

學習canvas，首先得知道如何去繪制線段，然后才能通過很多簡單的線段去實現(xiàn)比較復雜的圖形，比如常見的圖表，柱狀圖，折線圖等都是通過一段一段的線段實現(xiàn)的。

基礎知識

canvas的基礎知識不算多，主要掌握如何繪制線段，圖形，圖片，文本等。canvas可以在瀏覽器中繪制，也可以借助node-canvas在node服務端繪制簡單的圖片。本文只記錄在瀏覽器中繪制，至于在node端如何繪制，自己可以去查看相關(guān)資料。

在瀏覽器中繪制，就先在html中定義canvas元素，默認寬高是300*150，可以通過width和height設置。注意canvas元素樣式寬高和canvas繪圖畫布寬高不是一個東西，這塊將在以后說的。

<canvasid="canvas">

<p>當前瀏覽器不支持canvas，請升級瀏覽器</p>

</canvas>

在繪制之前，我們要先獲取當前canvas的2d繪制上下文context，后續(xù)總是通過操作context來進行繪制。

letcanvas=document.querySelector('#canvas');

if(!canvas){

thrownewError('cannotfindcanvaselement');

}

//注意2d.參數(shù)必須是小寫的；

//通過設置參數(shù)為webgl，可以獲取3d繪制上下文

letctx=canvas.getContext('2d');

注：后續(xù)示例中會忽略上面的代碼片段，直接使用ctx變量表示canvas的2d繪制上下文。

線段

在繪制一條簡單的線段時，一般會先設置線段的樣式，比如，顏色，線條寬度，線條端點樣式等，我們通過設置strokeStyle來設置ctx的全局繪制樣式，可以是rgba或合法的16進制顏色值，或者漸變對象等。如下代碼簡單的繪制了一條從(10,10)到(50,60)的，寬度為10的，紅色的線段。

ctx.strokeStyle='red';

ctx.lineWidth=10;

ctx.moveTo(10,10);

ctx.lineTo(50,60);

ctx.stroke();

繪制線段相關(guān)的方法以及屬性：

相關(guān)屬性：

lineCap，該值告訴瀏覽器如何繪制線段的端點，可選值為以下三個之一：butt，round，square。默認為butt。

lineWidth，該值決定了線段的像素寬度。必須為非負，非無窮，默認為1.0。

lineJoin，決定了兩條線段相交時如何繪制焦點，只有當兩條線段方向不同時，才會生效。可取值：bevel，round，miter。默認值是miter。

miterLimit，告訴瀏覽器如何繪制miter形式的線段焦點，只有當lineJoin='miter'有效，默認為10.0。

lineDashOffset，設置虛線偏移量，默認為0.0。

相關(guān)方法：

beginPath，將當前路徑之中的所有子路徑都要清除掉，以此來重置當前路徑。一般在繪制閉合圖形時要先調(diào)用。

closePath,顯示的封閉某段路徑。該方法用于封閉圓弧路徑以及由曲線或線段所創(chuàng)建的開放路徑。

moveTo，移動當前繪制點到指定的坐標。

lineTo，從上一個點繪制一條到指定坐標點的線段。

setLineDash，用來設置虛線的方法，參數(shù)是一個數(shù)組，表明繪制實線的長度，以及實線之間的間隙的長度。

試試用設置不同的lineCap值來繪制同樣的線段

ctx.lineWidth=10;

ctx.textAlign='center';

letcolors=['red','green','blue'];

letlineCaps=['butt','round','square'];

for(let[index,lc]oflineCaps.entries()){

ctx.strokeStyle=colors[index];//設置線段的顏色

ctx.lineCap=lc;//設置lineCap

ctx.beginPath();//清空當前路徑

ctx.moveTo(10,20+20*index);

ctx.lineTo(50,20+20*index);

ctx.stroke();

ctx.fillText(lc,80,25+20*index);

}

再來試試用不同的lineJoin值來繪制兩個線段焦點處的樣式

ctx.lineWidth=20;

ctx.textAlign='center';

ctx.lineCap='butt';

letcolors=['red','green','blue'];

letlineJoins=['bevel','round','miter'];

for(let[index,lj]oflineJoins.entries()){

ctx.strokeStyle=colors[index];//設置線段的顏色

ctx.lineJoin=lj;//設置lineJoin

ctx.beginPath();//清空當前路徑

ctx.moveTo(10+80*index,20);

ctx.lineTo(50+80*index,20);

ctx.lineTo(50+80*index,60);

ctx.stroke();

ctx.fillText(lj,40+80*index,80);

}

canvas不僅可以繪制實線，還可以繪制虛線。繪制虛線，通過設置lineDashOffset屬性和調(diào)用setLineDash()方式。

ctx.lineWidth=10;

ctx.textAlign='center';

ctx.setLineDash([8,8]);//表示實線部分8個像素，間隙部分8個像素

letcolors=['red','green','blue'];

letlineDashOffsets=[1,2,4];

for(let[index,ldOffset]oflineDashOffsets.entries()){

ctx.strokeStyle=colors[index];//線段顏色

ctx.lineDashOffset=ldOffset;//設置了偏移量

ctx.beginPath();

ctx.moveTo(10,20+20*index);

ctx.lineTo(100,20+20*index);

ctx.stroke();

ctx.fillText(`lineDashOffset:${ldOffset}`,160,25+20*index);

}

通過上述我們可以知道lineDashOffset就是設置的開始繪制虛線的偏移量。setLineDash()方法，接受一個數(shù)組參數(shù)，如果數(shù)組個數(shù)是奇數(shù)，則會默認把當前數(shù)組元素復制一份，使之變成偶數(shù)。從第0個元素，表示實線部分長度，第1個元素，表示間隙部分長度，第2個元素，表示實線部分長度，第3個元素，表示間隙部分長度，如果到數(shù)組最后一個元素了，又會從頭開始，以此類推。

ctx.lineWidth=10;

ctx.textAlign='center';

letcolors=['red','green','blue','gray'];

letlineDashes=[[20,20],[40,40],[20,40],[20,40,20]];

for(let[index,ld]oflineDashes.entries()){

ctx.strokeStyle=colors[index];//設置顏色

ctx.setLineDash(ld);//設置lineDash

ctx.beginPath();

ctx.moveTo(10,20+20*index);

ctx.lineTo(171,20+20*index);

ctx.stroke();

ctx.fillText(`lineDashes:[${ld}]`,240,25+20*index);

}

letlineDashOffset=0;//初始lineDashOffset

ctx.strokeStyle='green';

functionanimate(){

if(lineDashOffset>25){

lineDashOffset=0;

}

ctx.clearRect(0,0,width,height);//清空當前canvas

ctx.lineDashOffset=-lineDashOffset;//設置lineDashOffset

ctx.setLineDash([4,4]);//設置實線長度和間隙長度

ctx.rect(20,20,100,100);//繪制一個矩形

ctx.stroke();//對canvas當前路徑描邊

lineDashOffset+=1;//lineDashOffset偏移加1

window.requestAnimationFrame(animate);//用瀏覽器幀速率來反復執(zhí)行animate函數(shù)

}

animate();

小猿圈web前端講師認為：授之以魚更授之以漁，想要了解更多關(guān)于web前端開發(fā)方面的小伙伴，可以關(guān)注小猿圈每天的動態(tài)web前端自學②群：738735873，會不定期更新互聯(lián)網(wǎng)編程知識，希望對你的學習有一定的幫助。

轉(zhuǎn)載于:https://juejin.im/post/5ce66bdae51d4577407b1c96

總結(jié)

以上是生活随笔為你收集整理的小猿圈html5教程之canvas绘制线段方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。