鍍金池/ 問答/HTML5  HTML/ canvas繪制圓滑曲線的折線圖

canvas繪制圓滑曲線的折線圖

用原生JS寫折線圖，直角的可以寫出來，但是目前需要變做圓滑的曲線，類似：

clipboard.png
嘗試用貝塞爾曲線畫

let curveness = 0.2;
// 起點
let x0 = vertices[t - 1].x;
let y0 = vertices[t - 1].y;
// 終點
let x2 = vertices[t].x;
let y2 = vertices[t].y;
// 貝塞爾曲線中間點 curveness曲率
let x1 = (x0 + x2) / 2 - (y0 - y2) * curveness;
let y1 = (y0 + y2) / 2 - (y2 - y0) * curveness;
ctx.beginPath();
ctx.moveTo(vertices[t - 1].x, vertices[t - 1].y);
ctx.bezierCurveTo(x0, y0, x1, y1, x2, y2);
// ctx.arcTo(x1, y1, x2, y2, 100);

效果達(dá)不到需求的樣子

clipboard.png

拐點處還是直角的，有沒有大神可以提供下解決思路呢

回答
編輯回答
拼未來

三次曲線還沒研究過，如果是二次曲線可以先求兩點之間的中點，讓曲線的終點是這個中點即可，當(dāng)然如果要經(jīng)過首尾的點的話，就要排除一下。核心代碼如下：

隨機點連線例子

context.beginPath();
context.moveTo(points[0].x, points[0].y);

for (i = 1; i < numPoints - 2; i++) {
  ctrlPoint.x = (points[i].x + points[i + 1].x) / 2;
  ctrlPoint.y = (points[i].y + points[i + 1].y) / 2;
  context.quadraticCurveTo(points[i].x, points[i].y, ctrlPoint.x, ctrlPoint.y);
}
context.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
context.stroke();
2017年9月18日 13:06