本篇內容介紹了“HTML5中怎么用canvas繪制線條”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

成都創新互聯公司成立于2013年，是專業互聯網技術服務公司，擁有項目做網站、網站制作網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元延平做網站,已為上家服務,為延平各地企業和個人服務,聯系電話:028-86922220

<canvas></canvas>只是一個繪制圖形的容器，除了id、class、style等屬性外，還有height和width屬性。在<canvas>>元素上繪圖主要有三步：

1.獲取<canvas>元素對應的DOM對象，這是一個Canvas對象；

2.調用Canvas對象的getContext()方法，得到一個CanvasRenderingContext2D對象；

3.調用CanvasRenderingContext2D對象進行繪圖。

線條屬性

除了上面用到的lineWidth屬性，線條還有以下幾個屬性：

 &bull;lineCap 屬性設置或返回線條末端線帽的樣式，可以取以下幾個值：

“butt” 向線條的每個末端添加平直的邊緣（默認）；

“round” 向線條的每個末端添加圓形線帽；

“square” 向線條的每個末端添加正方形線帽。

 &bull;lineJoin 屬性當兩條線交匯時設置或返回所創建邊角的類型，可以取以下幾個值：

“miter” 創建尖角(默認)；

“bevel” 創建斜角；

“round” 創建圓角。

 &bull;miterLimit 屬性設置或返回最大斜接長度（默認為10）。斜接長度指的是在兩條線交匯處內角和外角之間的距離。只有當 lineJoin 屬性為 “miter” 時，miterLimit 才有效。 

JavaScript Code復制內容到剪貼板

var canvas = document.getElementById("canvas");   

    var context = canvas.getContext("2d");   

    //測試lineCap屬性   

    //設置基準線便于觀察   

    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繪制線條”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注創新互聯網站，小編將為大家輸出更多高質量的實用文章！

網站欄目：HTML5中怎么用canvas繪制線條
當前網址：http://vcdvsql.cn/article8/iigjop.html

成都網站建設公司_創新互聯，為您提供自適應網站、標簽優化、定制開發、網站維護、響應式網站、建站公司

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯