案例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> ~~~