1
<p>三种不同的结束线:</p>
2
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
3
您的浏览器不支持 HTML5 canvas 标签。
4
</canvas>
5
<script>
6
var c = document.getElementById("myCanvas");
7
var ctx = c.getContext("2d");
8
ctx.beginPath();
9
ctx.lineWidth = 10;
10
ctx.lineCap = "butt";
11
ctx.moveTo(20, 20);
12
ctx.lineTo(200, 20);
13
ctx.stroke();
14
ctx.beginPath();
15
ctx.lineCap = "round";
16
ctx.moveTo(20, 40);
17
ctx.lineTo(200, 40);
18
ctx.stroke();
19
ctx.beginPath();
20
ctx.lineCap = "square";
21
ctx.moveTo(20, 60);
22
ctx.lineTo(200, 60);
23
ctx.stroke();
24
</script>