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

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

基礎(chǔ)知識(shí)

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

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

<canvasid="canvas">

<p>當(dāng)前瀏覽器不支持canvas，請(qǐng)升級(jí)瀏覽器</p>

</canvas>

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

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

if(!canvas){

thrownewError('cannotfindcanvaselement');

}

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

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

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

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

線段

在繪制一條簡(jiǎn)單的線段時(shí)，一般會(huì)先設(shè)置線段的樣式，比如，顏色，線條寬度，線條端點(diǎn)樣式等，我們通過設(shè)置strokeStyle來設(shè)置ctx的全局繪制樣式，可以是rgba或合法的16進(jìn)制顏色值，或者漸變對(duì)象等。如下代碼簡(jiǎn)單的繪制了一條從(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，該值告訴瀏覽器如何繪制線段的端點(diǎn)，可選值為以下三個(gè)之一：butt，round，square。默認(rèn)為butt。

lineWidth，該值決定了線段的像素寬度。必須為非負(fù)，非無窮，默認(rèn)為1.0。

lineJoin，決定了兩條線段相交時(shí)如何繪制焦點(diǎn)，只有當(dāng)兩條線段方向不同時(shí)，才會(huì)生效。可取值：bevel，round，miter。默認(rèn)值是miter。

miterLimit，告訴瀏覽器如何繪制miter形式的線段焦點(diǎn)，只有當(dāng)lineJoin='miter'有效，默認(rèn)為10.0。

lineDashOffset，設(shè)置虛線偏移量，默認(rèn)為0.0。

相關(guān)方法：

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

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

moveTo，移動(dòng)當(dāng)前繪制點(diǎn)到指定的坐標(biāo)。

lineTo，從上一個(gè)點(diǎn)繪制一條到指定坐標(biāo)點(diǎn)的線段。

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

試試用設(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];//設(shè)置線段的顏色

ctx.lineCap=lc;//設(shè)置lineCap

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

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

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

ctx.stroke();

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

}

再來試試用不同的lineJoin值來繪制兩個(gè)線段焦點(diǎn)處的樣式

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];//設(shè)置線段的顏色

ctx.lineJoin=lj;//設(shè)置lineJoin

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

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不僅可以繪制實(shí)線，還可以繪制虛線。繪制虛線，通過設(shè)置lineDashOffset屬性和調(diào)用setLineDash()方式。

ctx.lineWidth=10;

ctx.textAlign='center';

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

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

letlineDashOffsets=[1,2,4];

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

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

ctx.lineDashOffset=ldOffset;//設(shè)置了偏移量

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就是設(shè)置的開始繪制虛線的偏移量。setLineDash()方法，接受一個(gè)數(shù)組參數(shù)，如果數(shù)組個(gè)數(shù)是奇數(shù)，則會(huì)默認(rèn)把當(dāng)前數(shù)組元素復(fù)制一份，使之變成偶數(shù)。從第0個(gè)元素，表示實(shí)線部分長(zhǎng)度，第1個(gè)元素，表示間隙部分長(zhǎng)度，第2個(gè)元素，表示實(shí)線部分長(zhǎng)度，第3個(gè)元素，表示間隙部分長(zhǎng)度，如果到數(shù)組最后一個(gè)元素了，又會(huì)從頭開始，以此類推。

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];//設(shè)置顏色

ctx.setLineDash(ld);//設(shè)置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);//清空當(dāng)前canvas

ctx.lineDashOffset=-lineDashOffset;//設(shè)置lineDashOffset

ctx.setLineDash([4,4]);//設(shè)置實(shí)線長(zhǎng)度和間隙長(zhǎng)度

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

ctx.stroke();//對(duì)canvas當(dāng)前路徑描邊

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

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

}

animate();

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

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

總結(jié)

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

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