1.使用strokeRect和fillRect方法绘制矩形

    a.strokeRect是绘制一个不填充的矩形

    b.fillRect是绘制一个填充的矩形

  代码:

  

        <script>
            var canvas = document.getElementById('canvas'),
                    context = canvas.getContext('2d');
                    
                    context.lineJoin = 'round';
                    context.lineWidth = 20;
                    
                    context.strokeRect(10, 10, 150, 100);
                    context.fillRect(180, 10, 150, 100);
        </script>

  效果如图:

  

 

  2.通过lineTo绘制矩形

  

<script>
            var canvas = document.getElementById('canvas'),
                    context = canvas.getContext('2d');
                    
                    context.lineJoin = 'round';
                    context.lineWidth = 20;
                    context.beginPath();
                    context.moveTo(10, 10);
                    context.lineTo(160, 10);
                    context.lineTo(160, 110);
                    context.lineTo(10, 110);
                    context.closePath();
                    context.stroke();
                    
                    context.beginPath();
                    context.moveTo(180, 10);
                    context.lineTo(330, 10);
                    context.lineTo(330, 110);
                    context.lineTo(180, 110);
                    context.closePath();
                    context.fill();
        </script>

  效果图如下:

    

posted on 2014-05-01 13:30  爱生活的夜  阅读(202)  评论(0编辑  收藏  举报