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);

　　　　效果圖： 默認是一像素的寬