画布动画画线

Question

我有一堆JSON文件，我想慢慢画出点。我已阅读tutorial，但这只是画一条线。但我想要的是按顺序绘制几行（先绘制一个，然后再绘制一个）并使用不同的起点。这里是JSON文件：

{ 
    "data": [ 
    { 
     "line": { 
     "color": "#96c23b", 
     "points": [ 
      { 
      "x": 1, 
      "y": 2 
      }, 
      { 
      "x": 2, 
      "y": 3 
      }, 
      { 
      "x": 4, 
      "y": 5 
      }, 
      { 
      "x": 7, 
      "y": 8 
      } 
     ], 
     "width": 2.0 
     }, 
     "type": "line", 
     "line_id": "1" 
    }, 
    { 
     "line": { 
     "color": "#DF5453", 
     "points": [ 
      { 
      "x": 33, 
      "y": 34 
      }, 
      { 
      "x": 34, 
      "y": 35 
      }, 
      { 
      "x": 38, 
      "y": 39 
      }, 
      { 
      "x": 40, 
      "y": 42 
      }, 
      { 
      "x": 45, 
      "y": 46 
      } 
     ], 
     "width": 5.0 
     }, 
     "type": "line", 
     "line_id": "2" 
    } 
    ] 
} 

绘图的速度并不重要。

我知道如何解析JSON并在画布上绘制没有动画的线条。这里是jQuery代码：

var points_list = {"data":[ 
    {"line":{"color":"#96c23b","points":[{"x":1,"y":2},{"x":2,"y":3},{"x":4,"y":5},{"x":7,"y":8}],"width":2.0},"type":"line","line_id":"1"}, 
    {"line":{"color":"#DF5453","points":[{"x":33,"y":34},{"x":34,"y":35},{"x":38,"y":39},{"x":40,"y":42},{"x":45,"y":46}],"width":5.0},"type":"line","line_id":"2"} 
]} 

function drawLines() { 
    var canvas = document.getElementById("canvas"), 
    context = canvas.getContext("2d"); 

    $.each(points_list.data, function (key, value) { 
     var info = value.line; 
     var color = info.color; 
     var width = info.width; 
     var points = info.points; 

     context.beginPath(); 
     context.moveTo(points[0].x, points[0].y); 
     context.lineWidth = width; 
     context.strokeStyle = color; 
     context.fillStyle = color; 

     for (var p = 1; p < points.length; p++) { 
      context.lineTo(points[p].x, points[p].y); 
     } 
     context.stroke(); 
    }); 
} 

Answer 1

这是一个使用变量跟踪outerList和innerList位置的示例。使用lineIndexB跟踪外部列表（points_list.data），使用lineIndexA跟踪innerList（points_list.data.line.points）。

每当drawLines函数触发时，绘制下一个线段，然后lineIndexA变量递增。如果线段完整，则lineIndexB递增。

这是使用setTimeout函数使动画工作，它可以很容易地转换为requestAnimationFrame。

var points_list = {"data":[ 
 
    {"line":{"color":"#96c23b","points":[{"x":1,"y":2},{"x":2,"y":3},{"x":4,"y":5},{"x":7,"y":8}],"width":2.0},"type":"line","line_id":"1"}, 
 
    {"line":{"color":"#DF5453","points":[{"x":33,"y":34},{"x":34,"y":35},{"x":38,"y":39},{"x":40,"y":42},{"x":45,"y":46}],"width":5.0},"type":"line","line_id":"2"} 
 
]}; 
 

 
var lineIndexA = 1; 
 
var lineIndexB = 0; 
 

 
var canvas = document.getElementById("canvas"); 
 
canvas.width = 500; 
 
canvas.height = 500; 
 
var context = canvas.getContext("2d"); 
 

 
function drawLines() { 
 
    
 
\t var value = points_list.data[lineIndexB]; 
 
    var info = value.line; 
 
    var color = info.color; 
 
    var width = info.width; 
 
    var points = info.points; 
 

 
    context.beginPath(); 
 
    context.moveTo(points[lineIndexA-1].x, points[lineIndexA-1].y); 
 
    context.lineWidth = width; 
 
    context.strokeStyle = color; 
 
    context.fillStyle = color; 
 
    context.lineTo(points[lineIndexA].x, points[lineIndexA].y);   
 
    context.stroke(); 
 
    
 
    lineIndexA = lineIndexA + 1; 
 
    if (lineIndexA>points.length-1) { 
 
    \t lineIndexA = 1; 
 
    lineIndexB = lineIndexB + 1; 
 
    } 
 
     
 
    //stop the animation if the last line is exhausted... 
 
    if (lineIndexB>points_list.data.length-1) return; 
 
    
 
    setTimeout(function() { 
 
    \t \t \t \t \t \t \t \t \t \t \t drawLines() 
 
       \t \t \t \t }, 1000); 
 
} 
 

 
drawLines();

<canvas id="canvas"></canvas>