Canvas绘图（一）

 1 <!DOCTYPE HTML>
 2 <html lang="en-US">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <canvas id="diagonal" style="border:1px solid;" width="200" height="200"></canvas>
 9     <script>
10     function drawDiagonal(){
11         //取得canvas元素及其绘图上下文
12         var canvas = document.getElementById('diagonal');
13         var context = canvas.getContext('2d');
14 
15         //用绝对坐标来创建一条路径
16         context.beginPath();
17         context.moveTo(100,50);
18         context.lineTo(50,150);
19         context.lineTo(170,90);
20         context.lineTo(30,90);
21         context.lineTo(150,150);
22         context.lineTo(100,50);
23 
24         //将这条线绘制到canvas上
25         context.stroke();
26     }
27 
28     window.addEventListener("load",drawDiagonal,true);
29     </script>
30 </body>
31 </html>
随便画画一个五角星