案例2：繪制圓形的結束線帽 · canvas基本功能

# 案例2：繪制圓形的結束線帽先看圖： ![](https://img.kancloud.cn/9b/60/9b6000bf22b45600788ccc0efe91f39c_408x151.png) 相關代碼如下： ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas</title> </head> <body> <canvas id="myCanvas" width="300" height="100" style="border: 1px solid #c3c3c3;"> 您的瀏覽器不支持 HTML5 canvas 標簽。 </canvas> <script> var c = document.getElementById("myCanvas"); //step1:獲取canvas元素 var ctx = c.getContext("2d"); //step2:內建的HTML5對象 ctx.beginPath(); //step3-1:開始一條路徑，或重置當前的路徑 ctx.lineWidth = 10; //step3-2:線條寬度 ctx.lineCap = "butt"; //step3-3:線條末端線帽樣式（默認：butt平直的邊緣） ctx.moveTo(20, 20); //step3-4:開始坐標 ctx.lineTo(200, 20); //step3-5:結束坐標 ctx.stroke(); //step3-6:繪制線條 ctx.beginPath(); ctx.lineWidth = 10; ctx.lineCap = "round"; //step3-3:線條末端線帽樣式（默認：round 圓形的線帽） ctx.moveTo(20, 40); ctx.lineTo(200, 40); ctx.stroke(); ctx.beginPath(); ctx.lineWidth = 10; ctx.lineCap = "square"; //step3-3:線條末端線帽樣式（默認：square 正方開有的線帽） ctx.moveTo(20, 60); ctx.lineTo(200, 60); ctx.stroke(); </script> </body> </html> ~~~