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

 1  var canvas=document.getElementById("canvas"); 2     var cxt=canvas.getContext("2d"); 3     cxt.beginPath(); 4     cxt.rect(100,20,100,100); 5     cxt.stroke();//空心矩形 6     cxt.closePath(); 7     //其他画法 8     cxt.beginPath(); 9     cxt.strokeRect(100,150,100,100);//这个方法相当于rect()和stroke()组合10     cxt.closePath();11 12     //实心矩形13     cxt.beginPath();14     cxt.rect(100,270,100,100);15     cxt.fill();16     cxt.closePath();17     //其他方法18     cxt.beginPath();19     cxt.fillStyle="red";//填充颜色20     cxt.fillRect(100,390,100,100);//实心矩形21     cxt.closePath();