?

定義和用法

lineCap 屬性設置或返回線條末端線帽的樣式。

注釋："round" 和 "square" 會使線條略微變長。

默認值：JavaScript 語法：

butt

context.lineCap="butt|round|square";

屬性值

值描述

butt	默認。向線條的每個末端添加平直的邊緣。
round	向線條的每個末端添加圓形線帽。
square	向線條的每個末端添加正方形線帽。

例子

var c = document.getElementById('myCanvas');var ctx = c.getContext("2d");//獲取上下文2d環境var lineCap = ["butt","round","square"];ctx.strokeStyle = "red";ctx.beginPath();ctx.moveTo(10,10);ctx.lineTo(10,150);ctx.moveTo(150,10);ctx.lineTo(150,150);ctx.stroke();ctx.closePath();for (var i = 0; i < lineCap.length; i++) {ctx.strokeStyle = "blue";ctx.lineWidth = 20;ctx.lineCap = lineCap[i];ctx.beginPath();ctx.moveTo(10,30*i+20);ctx.lineTo(150,30*i+20); ctx.stroke();ctx.closePath();//此處兩行不能顛倒位置，如果先閉合路徑再繪制就不會有端點樣式};

?

?

效果圖

?

轉載于:https://www.cnblogs.com/sugar-tomato/p/4489345.html

總結

以上是生活随笔為你收集整理的HTML5中lineCap端点样式遇到closePath()的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。