canvas中的点用贝斯曲线连接成光滑曲线（解决移动端画布模糊问题）

解决移动端画布模糊问题

第一步：将画布放大四倍，设置行内样式的宽高为原来的四倍即可
第二步：画布里面的内容也放大四倍
第三步：将画布宽高100%，压缩后变清晰

移动端用rem，放大四倍有困难，这里用js可以改变canvas的宽高

            //设置canvas大小
            var canvasSize = document.getElementById('chart')
            canvasSize.width = $('.canvasHeight').width() * 4
            canvasSize.height = $('.canvasHeight').height() * 4

将折线图变为贝斯曲线的方法

            /**
             * 贝斯曲线
             * @param {Object} ps   已知曲线将经过的坐标点
             * @param {number} i    第i个坐标点
             * @param {number} a    可以自定义的正数
             * @param {number} b    可以自定义的正数
             */
            function getCtrlPoint(ps, i, a, b) {
                if(!a || !b) {
                    a = 0.25;
                    b = 0.25;
                }
                //处理两种极端情形
                if(i < 1) {
                    var pAx = ps[0].x + (ps[1].x - ps[0].x) * a;
                    var pAy = ps[0].y + (ps[1].y - ps[0].y) * a;
                } else {
                    var pAx = ps[i].x + (ps[i + 1].x - ps[i - 1].x) * a;
                    var pAy = ps[i].y + (ps[i + 1].y - ps[i - 1].y) * a;
                }
                if(i > ps.length - 3) {
                    var last = ps.length - 1
                    var pBx = ps[last].x - (ps[last].x - ps[last - 1].x) * b;
                    var pBy = ps[last].y - (ps[last].y - ps[last - 1].y) * b;
                } else {
                    var pBx = ps[i + 1].x - (ps[i + 2].x - ps[i].x) * b;
                    var pBy = ps[i + 1].y - (ps[i + 2].y - ps[i].y) * b;
                }
                return {
                    pA: {
                        x: pAx,
                        y: pAy
                    },
                    pB: {
                        x: pBx,
                        y: pBy
                    }
                }
            }