canvas中的點用貝斯曲線連線成光滑曲線(解決移動端畫布模糊問題)
阿新 • • 發佈:2018-12-24
解決移動端畫布模糊問題
第一步:將畫布放大四倍,設定行內樣式的寬高為原來的四倍即可
第二步:畫布裡面的內容也放大四倍
第三步:將畫布寬高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
}
}
}