canvas二次贝塞尔曲线去锯齿

在canvas中绘制曲线时，由于像素的离散性，容易出现锯齿现象。为了解决这个问题，可以使用二次贝塞尔曲线的平滑处理。

具体的做法是在相邻两个控制点之间加入一个中间点，并使用二次贝塞尔曲线连接相邻三个点。这样就可以使曲线更加平滑，减少锯齿的出现。

代码示例：

function drawSmoothCurve(ctx, points) {
  ctx.beginPath();
  ctx.moveTo(points[0].x, points[0].y);

  for (var i = 1; i < points.length - 2; i++) {
    var x1 = (points[i].x + points[i + 1].x) / 2;
    var y1 = (points[i].y + points[i + 1].y) / 2;
    var x2 = (points[i + 1].x + points[i + 2].x) / 2;
    var y2 = (points[i + 1].y + points[i + 2].y) / 2;
    ctx.quadraticCurveTo(points[i].x, points[i].y, x1, y1);
    ctx.quadraticCurveTo(points[i + 1].x, points[i + 1].y, x2, y2);
  }

  // 绘制最后两个点
  ctx.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);
  ctx.stroke();
}

其中，`points`是一个包含所有点坐标的数组，`ctx`是canvas的2D绘图上下文。在函数中，我们先将起点移动到第一个点的位置，然后使用`quadraticCurveTo`方法绘制相邻三个点之间的曲线，其中控制点的坐标是相邻两个点坐标的平均值。最后，再绘制最后两个点之间的曲线即可。