canvas-在画布中画两个方块（一个空心一个实体）

效果图：

代码：

 1 <canvas id="c1" width="400" height="400" style="background-color:red">
 2     </canvas>
 3 
 4     <script type="text/javascript">
 5         //获取画布元素
 6         var canvas=document.getElementById("c1");
 7         //绘制环境（我称为“画笔”）
 8         var cxt=canvas.getContext("2d");
 9 
10         //画一个实体方块---fillRect(x,y,w,h);
11         cxt.fillRect(50,50,100,100);
12 
13         //画出一个空心方块---strokeRect(x,y,w,h);
14         cxt.strokeRect(200,200,100,100);
15         //cxt.strokeRect(200.5,200.5,100,100);
16     </script>

【知识点】：fill(填充)、stroke(画线)

　　1、fillRect(x,y,w,h); 　　 //绘制实体方块，默认黑色

　　2、strokeRect(x,y,w,h);　　//绘制空心方块

　　3、x,y:为起始坐标点 w,h:为宽和高的值

【需要注意的地方】：

　　cxt.strokeRect(200,200,100,100);

　　　　效果图：这里它占了两个像素，是因为该点在200像素的线上，线两边一边0.5像素，系统自动补全了另一半。

　　cxt.strokeRect(200.5,200.5,100,100);

　　　　效果图：默认是一像素的宽