canvas第一天

     第一次接触canvas,<canvas></canvas>是html5出现的新标签，IE9开始支持，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图。使用的领域涉及到小游戏的开发以及数据的可视化。

 一、两个概念：

    1、 绘图环境的含义：

         绘制图形所需的东西，就叫绘图环境。

    2、 路径的含义：

         路径是一个图形的轮廓，是对将来要绘制图形的一个规划。如果要让路径最终生效需要描边。

 二、使用canvas绘制图形

         canvas要展示的绘制效果是通过js来绘制的。

      1、准备工作：

       （1）需要获取一个绘图环境：

            通过canvasDOM元素提供的一个方法,getContext。

            var cvs = document.querySelector('canvas');

      （2）获取绘图环境的方法：

             canvas.getContext( '2d' || 'webgl' )   传入2d代表获取一个2d绘图环境，传入3d代表获取一个3d绘图环境。

             var ctx = cvs.getContext('2d');

     2、绘制图形

      （1）先移动钢笔到指定的位置

             ctx.moveTo( 0, 0 );

      （2）画图形的路径( 绘制矩形 )           

             ctx.lineTo(100, 0);
             ctx.lineTo(100, 100);
             ctx.lineTo(0, 100);
             ctx.lineTo(0, 0);

      （3）描边

             ctx.stroke();

  三、画布设置

        1、 画布的默认设置：

             canvas画布默认大小为300*150。

        2、 动态设置画布的大小：

           （1）canvasDOM对象有一个width和height属性，通过修改这两个属性值，就可以动态设置画布的大小。因为canvas绘制的图形是位图(像素图)，默认就是基于像素单位的(px)，所以不用加单位。

             例：cvs.width = 500;

                  cvs.height = 500;

           （2）动态设置画布大小会清除画布的内容，绘制图形之后，动态修改画布的大小，绘自动清除画布已经绘图的内容。

           （3）不要设置canvas样式中的宽高，因为会拉伸画布，原理和img设置样式宽高拉伸图片一样。直接设置<canvas width=" " height=" "></canvas>

   四、基于状态

        canvas绘图环境中的很多方法也是基于状态的，即修改了canvas绘图环境中的某些属性值， 相关连的一些方法最终的执行结果可能就会收到改变。

        案例：

function Person( name, age ) {
            this.name = name;
            this.age = age;
        }

        // 这个方法就是基于状态（属性值）的
        Person.prototype.run = function() {
            if( this.age < 5 ) {
                console.log('爬着跑');
            }else if( this.age >=5 && this.age < 16 ) {
                console.log('跳着跑');
            }else if( this.age >=16 && this.age < 48 ) {
                console.log('慢跑');
            }else {
                console.log('拄着拐杖跑');
            }
        };

        var xiaofang = new Person('小芳', 12);
        var fangma = new Person('小芳妈', 37);
        var fangnai = new Person('小芳奶', 60);

        xiaofang.run();
        fangma.run();
        fangnai.run();

   五、描边色、填充、填充色及设置线宽

         1、 设置描边色

            （1） ctx.strokeStyle = css支持的所有颜色表示方式，这里都支持。

                 当修改了这个描边色之后，一些和描边相关的方法，再次调用时都会受到影响。

            （2）设置 描边色后要调动stroke()方法，新的图形才会显示。

            （3）多次绘制图形描边会把前面的覆盖。

            （4）解决上面出现的问题：清除路径

                  ctx.beginPath();

         2、填充 填充色

           （1）填充：ctx.fill();

           （2）设置填充色：ctx.fillStyle=css

        3、设置线宽

            （1）ctx.lineWidth=number;  注意：不用加"px"

            （2）设置线宽后，顶端会出现锯齿，防止锯齿出现：闭合路径。

                    绘制完路径后，调用closePath()方法，有了这个方法后，最后一条路径可以不用绘制了。

    六、 非零环绕原则

         1、作用：

              用来判断路径围起来的图形，是在路径内，还是路径外。

         2、原理：

           （1） 在路径包含的区域内随便找一点，向外发送一条线，让这条线贯穿所有围绕该点的路径即可

           （2）开始一个计数器，初始值为0

           （3）开始计数，遇到顺时针围绕点的路径，数+1，遇到逆时针围绕点的路径，数-1

           （4）最终看看结果，如果不是0，那么认为这个块区域在路径包含之内

    七、 清除画布

          ctx.clearRect(起点x轴坐标，起点y轴坐标，清除区域的宽，清除区域的高);

          清除整个画布: ctx.clearRect(0 , 0 , cvs.width , cvs.height);

    八、小属性及虚线绘制介绍

           1、 线帽样式：

                 ctx.lineCap = 'butt' || 'round' || 'square'     默认值为butt

                 round用来设置圆头(圆的半径是线宽的一半)，square是两段个加长线宽的一半。

           2、 焦点样式：

                ctx.lineJoin = 'miter' || 'round' || 'bevel'     默认值为miter

                设置箭头长度，该属性只在lineJoin为miter的时候有效：ctx.miterLimit

           3、 虚线

             （1）设置虚线样式：

                    ctx.setLineDash([  ]);  注意：数组的长度是任意的，现实后空；可以传入一个参数，此时实空的长度一样。

             （2）获取虚线样式：

                   ctx.getLineDash();

    九、 画弧路径：

               ctx.arc( 圆心x轴坐标，圆心y轴坐标，半径，弧的起始位置，弧的结束位置，是否逆时针画(可选) )     默认是顺时针画弧。

               案例：

<canvas style="border: 1px solid red" width="500" height="500"></canvas>
    <script>
        var cvs = document.querySelector('canvas');
        var ctx = cvs.getContext('2d');

        // 角度转换为弧度
        function angleToRadian( angle ) {
            return Math.PI / 180 * angle;
        }

        // 顺时针从0度到90度画弧
        ctx.arc( 100, 100, 50, angleToRadian(0), angleToRadian(90) );
        ctx.stroke();

        // 逆时针从0度到90度画弧
        ctx.beginPath();
        ctx.arc( 300, 100, 50, angleToRadian(0), angleToRadian(90), true );
        ctx.stroke();

     十、 封装

                 1、 面向对象封装等腰三角形           

        // 绘制等腰三角形的方法
        function triangle( x, y, width, height, strokeStyle ) {
            /*
            * 实现思路：
            * 1、为了防止重绘之前的路径，先清除一下
            * 2、移动钢笔到图形起点
            * 3、画想要图形的路径
            * 4、设置描边色
            * 5、描边
            * */
            ctx.beginPath();
            ctx.moveTo( x, y );
            ctx.lineTo( x + width / 2, y + height );
            ctx.lineTo( x - width / 2, y + height );
            ctx.lineTo( x, y );
            ctx.strokeStyle = strokeStyle;
            ctx.stroke();
        }

        triangle( 100, 100, 100, 50, 'green' );

               2、 面向对象封装

           

// 等腰三角形的构造函数
        function Triangle( x, y, width, height, strokeStyle ) {
            this.x = x;
            this.y = y;
            this.width = width;
            this.height = height;
            this.strokeStyle = strokeStyle;
        }

        // 根据实例的属性绘制
        Triangle.prototype.draw = function() {
            /*
             * 实现思路：
             * 1、为了防止重绘之前的路径，先清除一下
             * 2、移动钢笔到图形起点
             * 3、画想要图形的路径
             * 4、设置描边色
             * 5、描边
             * */
            ctx.beginPath();
            ctx.moveTo( this.x, this.y );
            ctx.lineTo( this.x + this.width / 2, this.y + this.height );
            ctx.lineTo( this.x - this.width / 2, this.y + this.height );
            ctx.lineTo( this.x, this.y );
            ctx.strokeStyle = this.strokeStyle;
            ctx.stroke();
        };

        var triangle1 = new SanJiaoXing( 100, 100, 100, 50, 'green' );

        triangle1.draw();

    十一、 绘制坐标系                  

 /*
        * constructor { LineChart } 折线图构造函数
        * param { ctx: Context } 绘图上下文
        * param { paddingArr: Array } 折线图到画布四边的距离，存储顺序为上右下左
        * param { arrowArr: Array } 折线图中箭头的宽和高
        * */
        function LineChart( ctx, paddingArr, arrowArr ) {
            this.ctx = ctx;
            this.paddingArr = paddingArr;

            this.arrowArr = arrowArr;
            this.arrowWidth = this.arrowArr[0];
            this.arrowHeight = this.arrowArr[1];

            // 计算上顶点的坐标
            this.vertexTop = {
                x: this.paddingArr[ 3 ],
                y: this.paddingArr[ 0 ]
            };

            // 计算原点的坐标
            this.origin = {
                x: this.paddingArr[ 3 ],
                y: this.ctx.canvas.height - this.paddingArr[ 2 ]
            };

            // 计算右顶点的坐标
            this.vertexRight = {
                x: this.ctx.canvas.width - this.paddingArr[ 1 ],
                y: this.ctx.canvas.height - this.paddingArr[ 2 ]
            };
        }

        // 置换原型
        LineChart.prototype = {

            constructor: LineChart,

            // 绘制坐标轴中的两条线
            drawLine: function() {
                this.ctx.beginPath();
                this.ctx.moveTo( this.vertexTop.x, this.vertexTop.y );
                this.ctx.lineTo( this.origin.x, this.origin.y );
                this.ctx.lineTo( this.vertexRight.x, this.vertexRight.y );
                this.ctx.stroke();
            },

            // 绘制坐标轴中的两个箭头
            drawArrow: function() {

                // 先绘制上面箭头
                this.ctx.beginPath();
                this.ctx.moveTo( this.vertexTop.x, this.vertexTop.y );
                this.ctx.lineTo( this.vertexTop.x - this.arrowWidth / 2, this.vertexTop.y + this.arrowHeight );
                this.ctx.lineTo( this.vertexTop.x, this.vertexTop.y + this.arrowHeight / 2 );
                this.ctx.lineTo( this.vertexTop.x + this.arrowWidth / 2, this.vertexTop.y + this.arrowHeight );
                this.ctx.closePath();
                this.ctx.stroke();

                // 再绘制右面箭头
                this.ctx.beginPath();
                this.ctx.moveTo( this.vertexRight.x, this.vertexRight.y );
                this.ctx.lineTo( this.vertexRight.x - this.arrowHeight, this.vertexRight.y - this.arrowWidth / 2 );
                this.ctx.lineTo( this.vertexRight.x - this.arrowHeight / 2, this.vertexRight.y );
                this.ctx.lineTo( this.vertexRight.x - this.arrowHeight, this.vertexRight.y + this.arrowWidth / 2 );
                this.ctx.closePath();
                this.ctx.stroke();
            }
        };

        var lineChart = new LineChart( ctx, [ 20, 20, 20, 20 ], [ 10, 20 ] );
        lineChart.drawLine();
        lineChart.drawArrow();

    十二、 绘制折线图            

/*
        * constructor { LineChart } 折线图构造函数
        * param { ctx: Context } 绘图上下文
        * param { paddingArr: Array } 折线图到画布四边的距离，存储顺序为上右下左
        * param { arrowArr: Array } 折线图中箭头的宽和高
        * param { data: Array } 存储了折线图中所需的数据
        * */
        function LineChart( ctx, paddingArr, arrowArr, data ) {
            this.ctx = ctx;
            this.paddingArr = paddingArr;

            this.arrowArr = arrowArr;
            this.arrowWidth = this.arrowArr[0];
            this.arrowHeight = this.arrowArr[1];

            this.data = data;

            // 计算上顶点的坐标
            this.vertexTop = {
                x: this.paddingArr[ 3 ],
                y: this.paddingArr[ 0 ]
            };

            // 计算原点的坐标
            this.origin = {
                x: this.paddingArr[ 3 ],
                y: this.ctx.canvas.height - this.paddingArr[ 2 ]
            };

            // 计算右顶点的坐标
            this.vertexRight = {
                x: this.ctx.canvas.width - this.paddingArr[ 1 ],
                y: this.ctx.canvas.height - this.paddingArr[ 2 ]
            };

            // 根据数据得到对应的坐标
            this.processData();
        }

        // 置换原型
        LineChart.prototype = {

            constructor: LineChart,

            // 绘制折线图
            draw: function() {
                this.drawCoordinate();
                this.drawArrow();
                this.drawPoint();
                this.drawLine();
            },

            // 绘制坐标轴中的两条线
            drawCoordinate: function() {
                this.ctx.beginPath();
                this.ctx.moveTo( this.vertexTop.x, this.vertexTop.y );
                this.ctx.lineTo( this.origin.x, this.origin.y );
                this.ctx.lineTo( this.vertexRight.x, this.vertexRight.y );
                this.ctx.stroke();
            },

            // 绘制坐标轴中的两个箭头
            drawArrow: function() {

                // 先绘制上面箭头
                this.ctx.beginPath();
                this.ctx.moveTo( this.vertexTop.x, this.vertexTop.y );
                this.ctx.lineTo( this.vertexTop.x - this.arrowWidth / 2, this.vertexTop.y + this.arrowHeight );
                this.ctx.lineTo( this.vertexTop.x, this.vertexTop.y + this.arrowHeight / 2 );
                this.ctx.lineTo( this.vertexTop.x + this.arrowWidth / 2, this.vertexTop.y + this.arrowHeight );
                this.ctx.closePath();
                this.ctx.stroke();

                // 再绘制右面箭头
                this.ctx.beginPath();
                this.ctx.moveTo( this.vertexRight.x, this.vertexRight.y );
                this.ctx.lineTo( this.vertexRight.x - this.arrowHeight, this.vertexRight.y - this.arrowWidth / 2 );
                this.ctx.lineTo( this.vertexRight.x - this.arrowHeight / 2, this.vertexRight.y );
                this.ctx.lineTo( this.vertexRight.x - this.arrowHeight, this.vertexRight.y + this.arrowWidth / 2 );
                this.ctx.closePath();
                this.ctx.stroke();
            },

            // 把传入进来的数据转化为对应画布的坐标
            processData: function() {

                // 用来存储转换后的坐标数据
                this.processArr = [];

                // 遍历所有的数据，依次转换为对应的坐标
                for( var i = 0, len = this.data.length; i < len; i+=2 ) {
                    /*
                     * 数据转化为相当于画布的坐标：
                     * canvasX = this.origin.x + x
                     * canvasY = this.origin.y - y
                     * */
                    this.processArr.push( this.origin.x + this.data[ i ] );
                    this.processArr.push( this.origin.y - this.data[ i + 1 ] );
                }
            },

            // 根据数据绘制相应的点
            drawPoint: function() {
                var r = 4;

                // 遍历所有的坐标，依次绘制点
                for( var i = 0, len = this.processArr.length; i < len; i+=2 ) {
                    this.ctx.beginPath();
                    this.ctx.arc( this.processArr[ i ], this.processArr[ i + 1 ], r, 0, Math.PI*2 );
                    this.ctx.fill();
                }
            },

            // 根据数据绘制折线
            drawLine: function() {
                this.ctx.beginPath();
                for( var i = 0, len = this.processArr.length; i < len; i+=2 ) {
                    this.ctx.lineTo( this.processArr[ i ], this.processArr[ i + 1 ] );
                }
                this.ctx.stroke();
            }
        };

        var lineChart = new LineChart( ctx, [ 20, 20, 20, 20 ], [ 10, 20 ], [ 10, 10, 30, 20, 50, 50, 60, 80, 100, 100 ] );
        lineChart.draw();

      总结：