1、canvas：

  1. <style>
  2.         canvas{
  3.             width: 500px;
  4.             height: 300px;
  5.             border: 1px solid;
  6.         }
  7.     </style>
  8. </head>
  9. <body>
  10.    <canvas id="can" width="500px" height="300px"></canvas><!-- 只能写行间样式：画布的大小 -->
  11.    <script>
  12.        var canvas = document.getElementById('can');
  13.        var ctx = canvas.getContext("2d");
  14.         //规划一个路径(以三角形为例)
  15.     //    ctx.moveTo(100,100);
  16.     //    ctx.lineTo(200,100);
  17.     //    ctx.lineTo(200,200);
  18.     //    ctx.lineTo(100,100);
  19.        //自动闭合
  20.        ctx.moveTo(100,100);
  21.        ctx.lineTo(200,100);
  22.        ctx.lineTo(200,200);
  23.        ctx.lineTo(128,298);
  24.        ctx.closePath(); //    只针对某一能闭合的路径
  25.        ctx.fill();//    填充
  27.        //渲染
  28.        ctx.stroke();
  29.    </script>

2、造出一条细，一条粗的图形

  1. <style>
  2.     canvas{
  3.         width: 500px;
  4.         height: 300px;
  5.         border: 1px solid;
  6.     }
  7. </style>
  8. </head>
  9. <body>
  10. <canvas id="can" width="500px" height="300px"></canvas><!-- 只能写行间样式：画布的大小 -->
  11. <script>
  12.    var canvas = document.getElementById('can');
  13.    var ctx = canvas.getContext("2d");
  14.     // 规划一个路径(以三角形为例)
  15.     ctx.lineWidth = 10;
  16.     // 无论放在哪里，都相当于在moveTo前面声明了
  17.    ctx.moveTo(100,100);
  18.    ctx.lineTo(200,100);
  19.    ctx.stroke();
  20.    //如果要一条粗，一条细,只能另开一路
  21.     ctx.beginPath();
  22.     ctx.lineWidth = 5;
  23.     ctx.moveTo(200,100);
  24.     ctx.lineTo(200,200);
  25.     ctx.stroke();
  26. </script>
  27. </body>