canvas-第一天02部分

1.填充

        var canvas = document.getElementById("demoCanvas");
        var pencil = canvas.getContext("2d");

        function drawRect(startX, startY, width, height, lineWidth, strokeStyle, fillStyle) {
            pencil.moveTo(startX, startY);
            pencil.lineTo(startX + width, startY);
            pencil.lineTo(startX + width, startY + height);
            pencil.lineTo(startX, startY + height);
            pencil.closePath();//形成闭合路径

            pencil.lineWidth = lineWidth;
            pencil.strokeStyle = strokeStyle;
            pencil.fillStyle = fillStyle;

            pencil.fill();
            pencil.stroke();//
        }

        drawRect(20, 20, 40, 40, 6, 'red', 'green' );

2.非零环绕原则（用来判断哪些区域属于路径内，计算结果为非零，即为路径内）

3.绘制一个中空矩形

法一：画两个矩形

        var canvas = document.getElementById("demoCanvas");
        var pencil = canvas.getContext("2d");

        function drawRect(startX, startY, width, height, lineWidth, strokeStyle) {
            pencil.moveTo(startX, startY);
            pencil.lineTo(startX + width, startY);
            pencil.lineTo(startX + width, startY + height);
            pencil.lineTo(startX, startY + height);
            pencil.closePath();//形成闭合路径

            pencil.lineWidth = lineWidth;
            pencil.strokeStyle = strokeStyle;

            pencil.stroke();//
        }

        drawRect(20, 20, 60, 60, 6, 'skyblue');

        pencil.moveTo( 35, 35 );
        pencil.lineTo( 35, 55 );
        pencil.lineTo( 55, 55 );
        pencil.lineTo( 55, 35 );
        pencil.closePath();

        pencil.fill();//注意填充这一步在最后
        /*
        * 描边的时候，会占用原图形的一部分( 线宽的一半 )。
        * 所以，日常开发中，为了让线宽符合要求，
        * 最好先填充，再描边，防止填充时覆盖掉线宽的一半。
        * */

2.线帽样式

        var canvas = document.getElementById("demoCanvas");
        var pencil = canvas.getContext("2d");
//      线帽样式 butt默认  square线头两端各增加线宽的一半 round圆形线帽
        pencil.lineWidth = 10;
//        默认线头
        pencil.moveTo(10, 10);
        pencil.lineTo(310, 10);
        pencil.stroke();
//        增长线头， 两端各增长线宽的一半
        pencil.beginPath();
        pencil.lineCap = 'square';
        pencil.moveTo(10, 30);
        pencil.lineTo(310, 30);
        pencil.stroke();
//        圆线头 两端圆半径为线宽的一半
        pencil.beginPath();
        pencil.lineCap = 'round';
        pencil.moveTo(10, 50);
        pencil.lineTo(310, 50);
        pencil.stroke();

3.线交点样式

        var canvas = document.getElementById("demoCanvas");
        var pencil = canvas.getContext("2d");
//      交点处线帽样式 miter默认尖角型样式  bevel两边相连为一个斜面  round圆形线帽
        pencil.lineWidth = 10;
//        交点处默认线帽样式miter
        pencil.lineJoin = "miter";
        pencil.moveTo(10, 10);
        pencil.lineTo(60, 110);
        pencil.lineTo(110, 10);
        pencil.stroke();

//         交点处线帽样式圆头
        pencil.beginPath();
        pencil.lineJoin = "round";
        pencil.moveTo(10, 50);
        pencil.lineTo(60, 150);
        pencil.lineTo(110, 50);
        pencil.stroke();

//         交点处线帽样式为斜面
        pencil.beginPath();
        pencil.lineJoin = "bevel";
        pencil.moveTo(10, 90);
        pencil.lineTo(60, 190);
        pencil.lineTo(110, 90);
        pencil.stroke();

4.线帽和线交点不一致（有兴趣可以自己组合一下，这里只有三个）

        var canvas = document.getElementById("demoCanvas");
        var pencil = canvas.getContext("2d");
//      lineCap：线帽样式     butt默认样式  square长了一段  round圆形线帽
//      lineJoin：交点处样式  miter默认尖角型样式  bevel两边相连为一个斜面  round圆形线帽

        pencil.lineWidth = 10;
//        尖交点， 圆线帽
        pencil.lineJoin = "miter";
        pencil.lineCap = "round";
        pencil.moveTo(10, 10);
        pencil.lineTo(60, 110);
        pencil.lineTo(110, 10);
        pencil.stroke();

//        长线帽， 圆交点
        pencil.beginPath();
        pencil.lineJoin = "round";
        pencil.lineCap = "square";
        pencil.moveTo(10, 50);
        pencil.lineTo(60, 150);
        pencil.lineTo(110, 50);
        pencil.stroke();

//       斜面交点， 圆线帽
        pencil.beginPath();
        pencil.lineJoin = "bevel";
        pencil.lineCap = "round";
        pencil.moveTo(10, 90);
        pencil.lineTo(60, 190);
        pencil.lineTo(110, 90);
        pencil.stroke();