1、画矩形：

  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. ctx.moveTo(100,100);
  17. ctx.lineTo(300,100);
  18. ctx.lineTo(300,200);
  19. ctx.lineTo(100,200);
  20. ctx.closePath();
  21. ctx.stroke();
  22. //第二种：
  23. ctx.rect(100,100,200,100);//前俩起始位置，第三个长，第四个宽
  24. ctx.stroke();
  25. //第三种：
  26. ctx.strokeRect(100,100,200,100);
  27. //第四种：（直接填充）
  28. ctx.fillRect(100,100,200,100);
  29. </script>
  30. </body>