canvas线条笔帽及连接

1 function draw (id){
2     var canvas = document.getElementById(id);
3     context = canvas.getContext("2d");
4     miterDemo();
5     roundDemo();
6     bevelDemo();
7 }
8 function miterDemo (){
9     context.beginPath();
10     context.lineWidth = 10;
11     context.strokeStyle = "red";
12     context.lineJoin = "miter";
13     context.moveTo(50,300);
14     context.lineTo(100,100);
15     context.lineTo(150,300);
16     context.stroke();
17 }
18 function roundDemo (){
19     context.beginPath();
20     context.lineWidth = 10;
21     context.strokeStyle = "green";
22     context.lineJoin = "round";
23     context.moveTo(150,300);
24     context.lineTo(200,100);
25     context.lineTo(250,300);
26     context.stroke();
27 }
28 function bevelDemo (){
29     context.beginPath();
30     context.lineWidth = 10;
31     context.strokeStyle = "blue";
32     context.lineJoin = "bevel";
33     context.moveTo(250,300);
34     context.lineTo(300,100);
35     context.lineTo(350,300);
36     context.stroke();
37 }