canvas之画矩形

 <canvas id="canvas" width="600" height="500" style="background-color: yellow"></canvas>

  var canvas=document.getElementById("canvas");
     var cxt=canvas.getContext("2d");
     cxt.beginPath();
     cxt.rect(100,20,100,100);
     cxt.stroke();//空心矩形
     cxt.closePath();
     //其他画法
     cxt.beginPath();
     cxt.strokeRect(100,150,100,100);//这个方法相当于rect()和stroke()组合
     cxt.closePath();
 
     //实心矩形
     cxt.beginPath();
     cxt.rect(100,270,100,100);
     cxt.fill();
     cxt.closePath();
     //其他方法
     cxt.beginPath();
     cxt.fillStyle="red";//填充颜色
     cxt.fillRect(100,390,100,100);//实心矩形
     cxt.closePath();