您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)HTML5中的Canvas的常用線條屬性值是什么,小編覺得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話不多說,跟著小編一起來看看吧。
線條屬性概述
線條的屬性共有以下四個(gè):
1、lineCap屬性
lineCap 定義上下文中線的端點(diǎn),可以有以下 3 個(gè)值。
butt:默認(rèn)值,端點(diǎn)是垂直于線段邊緣的平直邊緣。
round:端點(diǎn)是在線段邊緣處以線寬為直徑的半圓。
square:端點(diǎn)是在選段邊緣處以線寬為長、以一半線寬為寬的矩形。
2、 lineJoin屬性
lineJoin 定義兩條線相交產(chǎn)生的拐角,可將其稱為連接。在連接處創(chuàng)建一個(gè)填充三角形,可以使用 lineJoin 設(shè)置它的基本屬性。
miter:默認(rèn)值,在連接處邊緣延長相接。miterLimit 是角長和線寬所允許的最大比例(默認(rèn)是 10)。
bevel:連接處是一個(gè)對角線斜角。
round:連接處是一個(gè)圓。
3、線寬
lineWidth 定義線的寬度(默認(rèn)值為 1.0)。
4、筆觸樣式
strokeStyle 定義線和形狀邊框的顏色和樣式。
后面兩個(gè)前面已經(jīng)說過了,這里我們著重來看看前兩個(gè)屬性。
線條的帽子lineCap
廢話不多說,直接上代碼看效果。
JavaScript Code復(fù)制內(nèi)容到剪貼板
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>線條的帽子</title> </head> <body> <div id="canvas-warp"> <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;"> 你的瀏覽器居然不支持Canvas?!趕快換一個(gè)吧??! </canvas> </div> <script> window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext("2d"); context.lineWidth = 50; context.strokeStyle = "#1BAAAA"; context.beginPath(); context.moveTo(100,100); context.lineTo(700,100); context.lineCap = "butt"; context.stroke(); context.beginPath(); context.moveTo(100,300); context.lineTo(700,300); context.lineCap = "round"; context.stroke(); context.beginPath(); context.moveTo(100,500); context.lineTo(700,500); context.lineCap = "square"; context.stroke(); //下面畫兩個(gè)基準(zhǔn)線方便觀察 context.lineWidth = 3; context.strokeStyle = "black"; context.beginPath(); context.moveTo(100,0); context.lineTo(100,600); context.moveTo(700,0); context.lineTo(700,600); context.stroke(); } </script> </body> </html>
運(yùn)行結(jié)果:
這里我還做了兩條平行線做一下參考,這樣一眼就能看清lineCap三個(gè)值的特點(diǎn)。但要注意,這個(gè)帽子只在線條的端點(diǎn)處起作用,哪怕是折點(diǎn)很多的折線,也僅僅是在開始和終止的兩個(gè)端點(diǎn)帶帽子。如果想改變線條折點(diǎn)(兩個(gè)線段的連接處)的樣式,那就要用到下面的lineJoin屬性。
線條的連接lineJoin
廢話不多說,直接上代碼看效果。這段代碼改自4-3,只是設(shè)置了一下連接的屬性。
JavaScript Code復(fù)制內(nèi)容到剪貼板
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>線條的連接</title> </head> <body> <div id="canvas-warp"> <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;"> 你的瀏覽器居然不支持Canvas?!趕快換一個(gè)吧??! </canvas> </div> <script> window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(100,100); context.lineTo(300,300); context.lineTo(100,500); context.lineJoin = "miter"; context.lineWidth = 20; context.strokeStyle = "red"; context.stroke(); context.beginPath(); context.moveTo(300,100); context.lineTo(500,300); context.lineTo(300,500); context.lineJoin = "bevel"; context.lineWidth = 20; context.strokeStyle = "blue"; context.stroke(); context.beginPath(); context.moveTo(500,100); context.lineTo(700,300); context.lineTo(500,500); context.lineJoin = "round"; context.lineWidth = 20; context.strokeStyle = "black"; context.stroke(); } </script> </body> </html>
運(yùn)行結(jié)果:
看不清的童鞋自己放大網(wǎng)頁或者自己將代碼的線寬調(diào)寬一點(diǎn)。
這里有一個(gè)很隱蔽的屬性,就是當(dāng)lineJoin設(shè)置為miter時(shí)(默認(rèn)),會(huì)解鎖一個(gè)成績,可以使用miterLimit屬性。
舉個(gè)例子看看。
JavaScript Code復(fù)制內(nèi)容到剪貼板
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>miterLimit</title> </head> <body> <div id="canvas-warp"> <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;"> 你的瀏覽器居然不支持Canvas?!趕快換一個(gè)吧?。?nbsp; </canvas> </div> <script> window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(100,100); context.lineTo(300,300); context.lineTo(100,500); context.lineJoin = "miter"; context.miterLimit = 10; context.lineWidth = 5; context.strokeStyle = "red"; context.stroke(); context.beginPath(); context.moveTo(300,200); context.lineTo(500,300); context.lineTo(300,400); context.lineJoin = "miter"; context.miterLimit = 10; context.lineWidth = 5; context.strokeStyle = "blue"; context.stroke(); context.beginPath(); context.moveTo(500,290); context.lineTo(700,300); context.lineTo(500,310); context.lineJoin = "miter"; context.miterLimit = 10; context.lineWidth = 5; context.strokeStyle = "black"; context.stroke(); } </script> </body> </html>
運(yùn)行結(jié)果:
會(huì)發(fā)現(xiàn),這個(gè)miterLimit規(guī)定了一個(gè)自動(dòng)填充連接點(diǎn)的極限值。如果超過了這個(gè)值,會(huì)導(dǎo)致lineJoin屬性失效,會(huì)從 miter 變成 bevel??梢钥闯鰜?,這個(gè)值和線寬以及夾角有關(guān),具體是啥關(guān)系??聪聢D。
可以看到,關(guān)系有點(diǎn)復(fù)雜。有興趣的小伙伴可以推導(dǎo)一下這個(gè)值與線寬、夾角的函數(shù)關(guān)系。其實(shí),大多時(shí)候用不到這個(gè)隱藏屬性,即便用到了也是憑感覺寫個(gè)數(shù)然后不滿意再調(diào)試即可。
高級線段繪制舉例
實(shí)際在畫布上繪制線段時(shí),會(huì)有一些奇怪的現(xiàn)象發(fā)生,這里融合本節(jié)課學(xué)到的兩個(gè)線段的屬性講解一個(gè)。
JavaScript Code復(fù)制內(nèi)容到剪貼板
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>miterLimit</title> </head> <body> <div id="canvas-warp"> <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;"> 你的瀏覽器居然不支持Canvas?!趕快換一個(gè)吧??! </canvas> </div> <script> window.onload = function(){ var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext("2d"); // 實(shí)例1: 圓形端點(diǎn),斜角連接,在畫布左上角 context.beginPath(); context.moveTo(0,0); context.lineTo(180,0); context.lineTo(180,180); context.lineJoin = 'bevel'; context.lineCap = 'round'; context.lineWidth = 10; context.strokeStyle = "red"; context.stroke(); // 實(shí)例2: 圓形端點(diǎn),斜角連接,不在畫布左上角 context.beginPath(); context.moveTo(300,200); context.lineTo(480,200); context.lineTo(480,380); context.lineJoin = 'bevel'; context.lineCap = 'round'; context.lineWidth = 10; context.strokeStyle = "blue"; context.stroke(); // 實(shí)例3: 平直端點(diǎn),圓形連接,不在畫布左上角 context.beginPath(); context.moveTo(600,400); context.lineTo(780,400); context.lineTo(780,580); context.lineJoin = 'round'; context.lineCap = 'butt'; context.lineWidth = 10; context.strokeStyle = "black"; context.stroke(); } </script> </body> </html>
運(yùn)行結(jié)果:
這 3 個(gè)線段和連接的實(shí)例有助于說明在畫布上繪制線段時(shí)不同屬性的組合。
實(shí)例 1 嘗試從畫布左上角開始繪制,結(jié)果發(fā)生了一個(gè)奇怪的現(xiàn)象。Canvas 路徑在 x 軸和 y 軸方向上都繪制到了起點(diǎn)的外側(cè)。由于這個(gè)原因?qū)嵗?1 上面的線看起來要細(xì)些。另外,左上角水平部分中圓形端點(diǎn)也無法看到,它們都被繪制到了屏幕之外的負(fù)值坐標(biāo)區(qū)域。此外,lineJoin 定義的對角線斜角也沒有繪出。
實(shí)例 2 調(diào)整了例子 1 中出現(xiàn)的問題,將起始點(diǎn)離開左上角。這樣就繪制出了完整的水平線,并且圓形 lineCap 和斜角 lineJoin 都被繪制出來了。
實(shí)例 3 顯示了去掉 lineCap 設(shè)置后的默認(rèn)端點(diǎn)效果,并且將 lineJoin 調(diào)整為圓角。
以上就是HTML5中的Canvas的常用線條屬性值是什么,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。