在画线时canvas有一个属性：
lineCap可填写3个参数：
butt(default)
round
square
程序运行截图如下：
源码如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
-
- <canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
- 当前浏览器不支持Canvas，请更换浏览器后再试
- </canvas>
-
- <script>
- window.onload = function() {
-
- let canvas = document.getElementById("canvas");
- canvas.width = 800;
- canvas.height = 800;
-
- let context = canvas.getContext("https://cdn.jxasp.com:9143/image/2d");
-
- context.lineWidth = 50;
- context.strokeStyle = "#005588";
-
- context.beginPath();
- context.moveTo(100, 200);
- context.lineTo(700, 200);
- context.lineCap = "butt";
- context.stroke();
-
- context.beginPath();
- context.moveTo(100, 400);
- context.lineTo(700, 400);
- context.lineCap = "round";
- context.stroke();
-
- context.beginPath();
- context.moveTo(100, 600);
- context.lineTo(700, 600);
- context.lineCap = "square";
- context.stroke();
-
- context.lineWidth = 1;
- context.strokeStyle = "#27a";
- context.moveTo(100, 100);
- context.lineTo(100, 700);
- context.moveTo(700, 100);
- context.lineTo(700, 700);
- context.stroke();
- }
-
- </script>
-
- </body>
- </html>
这个只能作为开始和结尾处。
