您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“HTML5中怎么用canvas繪制線條”的有關(guān)知識,在實(shí)際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
<canvas></canvas>只是一個(gè)繪制圖形的容器,除了id、class、style等屬性外,還有height和width屬性。在<canvas>>元素上繪圖主要有三步:
1.獲取<canvas>元素對應(yīng)的DOM對象,這是一個(gè)Canvas對象;
2.調(diào)用Canvas對象的getContext()方法,得到一個(gè)CanvasRenderingContext2D對象;
3.調(diào)用CanvasRenderingContext2D對象進(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();
“HTML5中怎么用canvas繪制線條”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(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)容。