zoukankan      html  css  js  c++  java
  • [HTML5 Canvas学习]绘制矩形

      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>

      效果图如下:

        

  • 相关阅读:
    BZOJ 1088 模拟(扫雷经验…)
    BZOJ 1529
    BZOJ 3224
    BZOJ 1192
    BZOJ 1012
    博客搬家说明
    BZOJ 2423 DP
    BZOJ 1789&1830 推式子 乱搞
    BZOJ 1588
    拆点:虫洞
  • 原文地址:https://www.cnblogs.com/jerry19890622/p/3702754.html
Copyright © 2011-2022 走看看