解決移動端畫布模糊問題

第一步：將畫布放大四倍，設定行內樣式的寬高為原來的四倍即可
第二步：畫布裡面的內容也放大四倍
第三步：將畫布寬高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
                    }
                }
            }