W3School TIY
编辑您的代码：
<!DOCTYPE html> <html> <body> <p>三种不同的线帽：</p> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.lineWidth=10; ctx.lineCap="butt"; ctx.moveTo(20,20); ctx.lineTo(200,20); ctx.stroke(); ctx.beginPath(); ctx.lineCap="round"; ctx.moveTo(20,40); ctx.lineTo(200,40); ctx.stroke(); ctx.beginPath(); ctx.lineCap="square"; ctx.moveTo(20,60); ctx.lineTo(200,60); ctx.stroke(); </script> </body> </html>
查看结果: