开发者社区问答正文

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]);

展开

收起

a123456678 2016-03-12 10:14:18 3859 版权

1 条回答

写回答

取消提交回答

a123456678

 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();