canvas中如何在多点之间 平滑的画出一条线，类似动画的那种 急急急！！！

以下是我的代码，

 var content = document.getElementById('weatherForecastCanvas');
    var ctx = content.getContext("2d");
    ctx.strokeStyle = "#fff";
    ctx.fillStyle = "#fff";
    ctx.lineWidth = 3;


//最高1

    ctx.arc(xPoints[0], yPoints[0], 3, 0, Math.PI * 2, true);

////////////////////开始最高温度的线///////////////////////////////

    ctx.fillText("" + a[0] + "℃", xPoints[0] - 10, yPoints[0] + 20);
    ctx.moveTo(xPoints[0], yPoints[0]);
    ctx.lineTo(xPoints[1], yPoints[1]);

//最高2

    ctx.arc(xPoints[1], yPoints[1], 3, 0, Math.PI * 2, true);
    ctx.fillText("" + a[1] + "℃", xPoints[1] - 10, yPoints[1] + 20);
    ctx.moveTo(xPoints[1], yPoints[1]);
    ctx.lineTo(xPoints[2], yPoints[2]);

---

感觉题主要的是类似这样的？
既然要一点点的话，那就把画的动作定时的来操作，一点点的画线，看下面示例代码

 var canvas = document.querySelector('canvas'),
               context = canvas.getContext('2d'),
               w, h;
               w = canvas.width = window.innerWidth;
               h = canvas.height = window.innerHeight;
           
     var x=y=0;
     var maxX = 200,
          maxY = 200;
     var interVal ;
          context.strokeStyle = "red";
          context.fillStyle = "blue";
          context.lineWidth = 3;
            
          //定时画  
          function draw(){
            if(x<maxX&&y<=maxY){
              context.lineTo(x+=10, y+=10);
              context.stroke();
            }else{
              clearInterval(interVal);
            }
          }
          //另一种画
           function drawFrame(){
              interVal = window.requestAnimationFrame(drawFrame, canvas);
               if(x<maxX&&y<=maxY){
                context.lineTo(x+=10, y+=10);
                context.stroke();
               }else{
                window.cancelAnimationFrame(interVal);
               }
           }

           context.moveTo(x,y);
            
         // interVal = setInterval(draw, 500);
           
        drawFrame();

---

平滑曲线是做高阶贝塞尔曲线吗

---

以前用canvas写过一个帧动画demo。

https://rawgit.com/zhangmengxue/Practice/master/canvas-growth-radius.html

原理差不多的，可以换成画线。

---

帮你找了几个资源
http://stackoverflow.com/questions/25480506/how-to-progressively-draw-line-animation-in-html5-canvas
http://jsfiddle.net/m1erickson/7faRQ/