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

效果图：

　　

代码：

<canvas id="c1" width="400" height="400" style="background-color:red">
    </canvas>

    <script type="text/javascript">
        //获取画布元素
        var canvas=document.getElementById("c1");
        //绘制环境（我称为“画笔”）
        var cxt=canvas.getContext("2d");

        //画一个实体方块---fillRect(x,y,w,h);
        cxt.fillRect(50,50,100,100);

        //画出一个空心方块---strokeRect(x,y,w,h);
        cxt.strokeRect(200,200,100,100);
        //cxt.strokeRect(200.5,200.5,100,100);
    </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);

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