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>
随便画画一个五角星