您好,登錄后才能下訂單哦!
本文將為大家詳細(xì)介紹“HTML5 canvas基本繪圖之怎么繪制線條”,內(nèi)容步驟清晰詳細(xì),細(xì)節(jié)處理妥當(dāng),而小編每天都會(huì)更新不同的知識(shí)點(diǎn),希望這篇“HTML5 canvas基本繪圖之怎么繪制線條”能夠給你意想不到的收獲,請(qǐng)大家跟著小編的思路慢慢深入,具體內(nèi)容如下,一起去收獲新知識(shí)吧。
1、簡易性:超級(jí)文本標(biāo)記語言版本升級(jí)采用超集方式,從而更加靈活方便,適合初學(xué)前端開發(fā)者使用。 2、可擴(kuò)展性:超級(jí)文本標(biāo)記語言的廣泛應(yīng)用帶來了加強(qiáng)功能,增加標(biāo)識(shí)符等要求,超級(jí)文本標(biāo)記語言采取子類元素的方式,為系統(tǒng)擴(kuò)展帶來保證。 3、平臺(tái)無關(guān)性:超級(jí)文本標(biāo)記語言能夠在廣泛的平臺(tái)上使用,這也是萬維網(wǎng)盛行的一個(gè)原因。 4、通用性:HTML是網(wǎng)絡(luò)的通用語言,它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面,這些頁面可以被網(wǎng)上任何其他人瀏覽到,無論使用的是什么類型的電腦或?yàn)g覽器。
<canvas></canvas>是HTML5中新增的標(biāo)簽,用于繪制圖形,實(shí)際上,這個(gè)標(biāo)簽和其他的標(biāo)簽一樣,其特殊之處在于該標(biāo)簽可以獲取一個(gè)CanvasRenderingContext2D對(duì)象,我們可以通過JavaScript腳本來控制該對(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è)置或返回最大斜接長度(默認(rèn)為10)。斜接長度指的是在兩條線交匯處內(nèi)角和外角之間的距離。只有當(dāng) lineJoin 屬性為 “miter” 時(shí),miterLimit 才有效。
JavaScript Code復(fù)制內(nèi)容到剪貼板
var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //測試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(); //測試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(); //測試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();
各屬性的不同取值的效果如下:
如果你能讀到這里,小編希望你對(duì)“HTML5 canvas基本繪圖之怎么繪制線條”這一關(guān)鍵問題有了從實(shí)踐層面最深刻的體會(huì),具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì),如果想閱讀更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。