HTML5中怎么用canvas繪制線條

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

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