App下載

在html中怎么通過(guò)canvas繪制線(xiàn)段?使用canvas繪制線(xiàn)段實(shí)現(xiàn)方法分享!

猿友 2021-07-15 09:44:15 瀏覽數(shù) (3406)
反饋

在數(shù)學(xué)中我們都會(huì)使用到不同的多種復(fù)雜的圖形好比柱狀圖或者折線(xiàn)圖等等之類(lèi)的圖形,那么今天我們就來(lái)說(shuō)說(shuō):“在html中怎么通過(guò)canvas繪制線(xiàn)段?”這個(gè)問(wèn)題,下面是小編整理的相關(guān)內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。 

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

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

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

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

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

let canvas = document.querySelector('#canvas');
if (!canvas) {
  throw new Error('can not find canvas element');
}
// 注意2d.參數(shù)必須是小寫(xiě)的;
// 通過(guò)設(shè)置參數(shù)為webgl,可以獲取3d繪制上下文
let ctx = canvas.getContext('2d');

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

再來(lái)看看canvas 2d繪制中的坐標(biāo)系統(tǒng),當(dāng)前canvas元素左上角為坐標(biāo)原點(diǎn)(0,0),水平向右為X軸正方向,垂直向下為Y軸正方向,如下圖。可以通過(guò)平移(?translate?),旋轉(zhuǎn)(?rotate?),縮放(?scale?)來(lái)操作坐標(biāo)系,實(shí)現(xiàn)一些動(dòng)畫(huà),這部分將在動(dòng)畫(huà)知識(shí)部分詳細(xì)講解。

線(xiàn)段

在繪制一條簡(jiǎn)單的線(xiàn)段時(shí),一般會(huì)先設(shè)置線(xiàn)段的樣式,比如,顏色,線(xiàn)條寬度,線(xiàn)條端點(diǎn)樣式等,我們通過(guò)設(shè)置strokeStyle來(lái)設(shè)置ctx的全局繪制樣式,可以是rgba或合法的16進(jìn)制顏色值,或者漸變對(duì)象等。如下代碼簡(jiǎn)單的繪制了一條從(10,10)到(50,60)的,寬度為10的,紅色的線(xiàn)段。

ctx.strokeStyle = 'red';
ctx.lineWidth = 10;
ctx.moveTo(10, 10);
ctx.lineTo(50, 60);
ctx.stroke();

先看看與繪制線(xiàn)段相關(guān)的方法以及屬性,

相關(guān)屬性:

  • lineCap,該值告訴瀏覽器如何繪制線(xiàn)段的端點(diǎn),可選值為以下三個(gè)之一:butt,round,square。默認(rèn)為butt。
  • lineWidth,該值決定了線(xiàn)段的像素寬度。必須為非負(fù),非無(wú)窮,默認(rèn)為1.0。
  • lineJoin,決定了兩條線(xiàn)段相交時(shí)如何繪制焦點(diǎn),只有當(dāng)兩條線(xiàn)段方向不同時(shí),才會(huì)生效??扇≈担篵evel,round,miter。默認(rèn)值是miter。
  • miterLimit,告訴瀏覽器如何繪制miter形式的線(xiàn)段焦點(diǎn),只有當(dāng)lineJoin='miter'有效,默認(rèn)為10.0。
  • lineDashOffset,設(shè)置虛線(xiàn)偏移量,默認(rèn)為0.0。

相關(guān)方法:

  • beginPath,將當(dāng)前路徑之中的所有子路徑都要清除掉,以此來(lái)重置當(dāng)前路徑。一般在繪制閉合圖形時(shí)要先調(diào)用。
  • closePath ,顯示的封閉某段路徑。該方法用于封閉圓弧路徑以及由曲線(xiàn)或線(xiàn)段所創(chuàng)建的開(kāi)放路徑。
  • moveTo,移動(dòng)當(dāng)前繪制點(diǎn)到指定的坐標(biāo)。
  • lineTo,從上一個(gè)點(diǎn)繪制一條到指定坐標(biāo)點(diǎn)的線(xiàn)段。
  • setLineDash,用來(lái)設(shè)置虛線(xiàn)的方法,參數(shù)是一個(gè)數(shù)組,表明繪制實(shí)線(xiàn)的長(zhǎng)度,以及實(shí)線(xiàn)之間的間隙的長(zhǎng)度。

試試用設(shè)置不同的lineCap 值來(lái)繪制同樣的線(xiàn)段

ctx.lineWidth = 10;
ctx.textAlign = 'center';
let colors = ['red', 'green', 'blue'];
let lineCaps = ['butt', 'round', 'square'];
for (let [index, lc] of lineCaps.entries()) {
  ctx.strokeStyle = colors[index]; //設(shè)置線(xiàn)段的顏色
  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);
}

從上圖結(jié)果可以看出,再將lineCap設(shè)置為round 和square時(shí)會(huì)在原線(xiàn)段的兩端加上一定長(zhǎng)度的端點(diǎn),只不過(guò)round是圓弧樣式,square是矩形樣式。需要注意的一點(diǎn)是,在canvas繪制上下文中同一時(shí)刻只能存在一個(gè)當(dāng)前路徑,為了繪制不同的線(xiàn)段,必須在每次繪制之前調(diào)用beginPath()來(lái)清空當(dāng)前路線(xiàn),開(kāi)始新的路徑。

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

ctx.lineWidth = 20;
ctx.textAlign = 'center';
ctx.lineCap = 'butt';
let colors = ['red', 'green', 'blue'];
let lineJoins = ['bevel', 'round', 'miter'];
for (let [index, lj] of lineJoins.entries()) {
  ctx.strokeStyle = colors[index]; //設(shè)置線(xiàn)段的顏色
  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);
}

可以看到,三種lineJoin在處理兩條線(xiàn)段的焦點(diǎn)處的不同。其中,在設(shè)置lineJoin="miter"時(shí),通過(guò)設(shè)置miterLimit屬性可以設(shè)置斜接線(xiàn)的長(zhǎng)度與二分之一線(xiàn)寬的最大比值,當(dāng)超過(guò)這個(gè)比值時(shí),則lineJoin會(huì)采用bevel方式。

canvas不僅可以繪制實(shí)線(xiàn),還可以繪制虛線(xiàn)。繪制虛線(xiàn),通過(guò)設(shè)置lineDashOffset屬性和調(diào)用setLineDash()方式。

ctx.lineWidth = 10;
ctx.textAlign = 'center';
ctx.setLineDash([8, 8]); //表示實(shí)線(xiàn)部分8個(gè)像素,間隙部分8個(gè)像素
let colors = ['red', 'green', 'blue'];
let lineDashOffsets = [1, 2, 4];
for (let [index, ldOffset] of lineDashOffsets.entries()) {
  ctx.strokeStyle = colors[index]; //線(xiàn)段顏色
  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è)置的開(kāi)始繪制虛線(xiàn)的偏移量。setLineDash()方法,接受一個(gè)數(shù)組參數(shù),如果數(shù)組個(gè)數(shù)是奇數(shù),則會(huì)默認(rèn)把當(dāng)前數(shù)組元素復(fù)制一份,使之變成偶數(shù)。從第0個(gè)元素,表示實(shí)線(xiàn)部分長(zhǎng)度,第1個(gè)元素,表示間隙部分長(zhǎng)度,第2個(gè)元素,表示實(shí)線(xiàn)部分長(zhǎng)度,第3個(gè)元素,表示間隙部分長(zhǎng)度,如果到數(shù)組最后一個(gè)元素了,又會(huì)從頭開(kāi)始,以此類(lèi)推。

ctx.lineWidth = 10;
ctx.textAlign = 'center';
let colors = ['red', 'green', 'blue', 'gray'];
let lineDashes = [[20, 20], [40, 40], [20, 40], [20, 40, 20]];
for (let [index, ld] of lineDashes.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);
}

let lineDashOffset = 0; //初始lineDashOffset
ctx.strokeStyle = 'green';
function animate() {
  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í)線(xiàn)長(zhǎng)度和間隙長(zhǎng)度
  ctx.rect(20, 20, 100, 100); //繪制一個(gè)矩形
  ctx.stroke(); //對(duì)canvas當(dāng)前路徑描邊
  lineDashOffset += 1; //lineDashOffset偏移加1
  window.requestAnimationFrame(animate); //用瀏覽器幀速率來(lái)反復(fù)執(zhí)行animate函數(shù)
}
animate();

小結(jié)

繪制線(xiàn)段時(shí),要理解canvas當(dāng)前路徑概念,某一時(shí)刻,canvas中當(dāng)前路徑只有一條,在開(kāi)始新的路徑時(shí),必須調(diào)用beginPath()??梢酝ㄟ^(guò)設(shè)置lineWidth,lineCap,lineJoin設(shè)置線(xiàn)段的繪制樣式。在描邊線(xiàn)段時(shí),可以通過(guò)strokeStyle來(lái)設(shè)置線(xiàn)段的顏色。

canvas中不僅可以繪制實(shí)線(xiàn),還可以通過(guò)lineDashOffsetsetLineDash()來(lái)繪制虛線(xiàn)。

那么小編今天的介紹相信大家對(duì)“在html中怎么通過(guò)canvas繪制線(xiàn)段?”這個(gè)問(wèn)題也有了多少的了解,更多有關(guān)于 html 這方面的相關(guān)內(nèi)容我們都可以在 W3Cschool中進(jìn)行學(xué)習(xí)和了解更多的內(nèi)容。 



0 人點(diǎn)贊