利用HTML5 Canvas API绘制矩形的超级攻略

    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    </canvas>   
</div>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
  
        context.beginPath();   
        context.rect(0, 0, 800, 600);   
        context.fillStyle = "#AA9033";   
  
        context.fill();   
  
        context.beginPath();   
        for(var i=0; i<=20; i++){   
            drawWhiteRect(context, 200 + 10 * i, 100 + 10 * i, 400 – 20 * i, 400 – 20 * i);   
            drawBlackRect(context, 205 + 10 * i, 105 + 10 * i, 390 – 20 * i, 390 – 20 * i);   
        }   
  
        context.beginPath();   
        context.rect(395, 295, 5, 5);   
        context.fillStyle = "black";   
        context.lineWidth = 5;   
  
        context.fill();   
        context.stroke();   
    }   
  
    function drawBlackRect(cxt, x, y, width, height){